原生JS编写多值运动框架

多值运动框架 

function movejs(obj,json,time,callback) {
    var sTime=new Date(),//初始时间
        sVal={}, //初始值
        s,
        tVal={};  //需要运动多少
    for (var attr in json){
        sVal[attr]=parseFloat(getCsss(obj)[attr]);
        tVal[attr]=json[attr]-sVal[attr];
    }
    ~function m() {
    // 时间差
var timeDiff=new Date()-sTime;
    // 判断时间差,何时终止 timeDiff
>=time?timeDiff=time:requestAnimationFrame(m);
     // 此框架有对透明度的兼容
for (attr in json){ if(attr==="opacity"){ s=tVal[attr]*timeDiff/time+sVal[attr]; }else{ s=tVal[attr]*timeDiff/time+sVal[attr]+"px"; } obj.style[attr]=s; }
    // 运动结束后可以传入一个回调函数,没有也可以
if(timeDiff>=time){ callback&&callback.call(obj); } }(); } //获取样式 function getCsss(obj) { return obj.currentStyle ||getComputedStyle(obj); }

以上代码有不对的欢迎指出,谢谢。

posted @ 2018-06-21 18:05  allen_xia  阅读(123)  评论(0)    收藏  举报