原生js设计的运动框架

Posted 2020-11-06 curry30

这个运动框架适合绝大多数的动画运动，话不多说，先上代码：

function move(obj,json,fn){

//关闭定时器
clearInterval(obj.timer);

//开启定时器
obj.timer = setInterval(function(){
var bStop = true;
for(var attr in json){
//先判断是否是透明度
var iCur;
if(attr == "opacity"){

//parseInt:防止在IE出现闪烁问题
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{

//将字符串转换为数字
iCur = parseInt(getStyle(obj,attr));//对opacity进行兼容处理；
}

//算速度

var speed = (json[attr] - iCur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(json[attr] != iCur){
bStop = false;
}

if(attr == "opacity"){
obj.style.opacity = (iCur+speed)/100;
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")"
}else{
obj.style[attr] = iCur+speed+‘px‘;
}
}

//如果所有都到达了目标点，关闭定时器

if(bStop){
clearInterval(obj.timer);
fn&&fn();
}
},30)
}