码迷,mamicode.com
首页 > Web开发 > 详细

原生js设计的运动框架

时间:2018-05-19 18:30:21      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:pac   运动   speed   AC   set   get   false   字符   转换   

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

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)
}

 

原生js设计的运动框架

标签:pac   运动   speed   AC   set   get   false   字符   转换   

原文地址:https://www.cnblogs.com/curry30/p/9060943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!