我是靠谱客的博主 善良台灯,最近开发中收集的这篇文章主要介绍animate js动画函数,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述


function animate(obj,targetJSON,time,callback){
var interval = 10;
if(window.navigator.userAgent.indexOf("MSIE") != -1){
interval = 50;
}
var semophorJSON = {};
for(var k in targetJSON){
semophorJSON[k] = parseFloat(fetchComputedStyle(obj,k));
}
var maxCount = time / interval;
var stepJSON = {};
for(var k in targetJSON){
targetJSON[k] = parseFloat(targetJSON[k]);
stepJSON[k] = (targetJSON[k] - semophorJSON[k]) / maxCount;
}
var count = 0;
var t1 = new Date();
var timer = setInterval(function(){
for(var k in semophorJSON){
semophorJSON[k] += stepJSON[k];
if(k != "opacity"){
obj.style[k] = semophorJSON[k] + "px";
}else{
obj.style[k] = semophorJSON[k];
obj.style.filter = "alpha(opacity = " + (semophorJSON[k] * 100) + ")";
}
}
count++;
if(count >= maxCount){
for(var k in targetJSON){
if(k != "opacity"){
obj.style[k] = targetJSON[k] + "px";
}else{
obj.style[k] = targetJSON[k];
obj.style.filter = "alpha(opacity = " + (targetJSON[k] * 100) + ")";
}
}
clearInterval(timer);
console.log("time: " + (new Date() - t1));
callback && callback();
}
},interval);
}
function fetchComputedStyle(obj,property){
if(window.getComputedStyle){
property = property.replace(/[A-Z]/g,function(word){
return "-" + word.toLowerCase();
});
return window.getComputedStyle(obj)[property];
}else{
property = property.replace(/-([a-z])/g,function(match,$1){
return $1.toUpperCase();
});
return obj.currentStyle[property];
}
}

 

最后

以上就是善良台灯为你收集整理的animate js动画函数的全部内容,希望文章能够帮你解决animate js动画函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部