Js实现动画框架

Posted 2020-07-27 yanglang

 

效果：

1. 同时动画

2. 链式动画

 

参数一： obj 是控件对象

参数二：是同时动画最终的条件，比如说{width:400,height:400} 表示同时 宽度和高度变成400px

参数三： 是链式动画的后续动画， 当动画完成json变化后，将继续进行，完成fn函数动画
function startMove(obj,json,fn){
clearInterval(obj.timer);
var flag;//标志所有运动是否到达目标值
obj.timer=setInterval(function(){
flag=true; //进入定时器时,现将flag设置为所有的属性都已达到目标值
for(var attr in json){
//取属性值
var curr=0;
//判断是否为透明度
if(attr==‘opacity‘){
curr=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
curr=parseInt(getStyle(obj,attr));
}
//移动速度处理
var speed=0;
speed=(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr!=json[attr]){
flag=false; //假设有三个json的key/value值,这三个值中只要有一个没有达到目标值,flag就等于false.
}
if (attr==‘opacity‘) {
obj.style.filter=‘alpha(opacity:‘+(curr+speed)+")";
obj.style.opacity=(curr+speed)/100;
}
else{
obj.style[attr]=curr+speed+‘px‘;
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
function getStyle(obj,attr){

if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
getComputedStyle(obj,false)[attr];
}
}