关于tween.js 封装的方法

今天做的是匀速情况下div的运动。首先开始之前先了解运动的原理

A------------>>B
A移动到B 这段距离是总距离 　　 用一个变量保存下来：var d
A移动到B 移动的总次数　　　　  用一个变量保存下来：var c
A移动到B 每次移动的距离　　　  用一个变量保存下来：var s

 

function move(obj,name,target,dur,fn){
    var timer;  //控制定时器
    var c=parseInt(dur/30);   //移动的总步数
    var start=parseFloat(getStyle(obj,name)); //获取当前元素样式的属性值
    var d=target-start;   //移动的总距离
        var s=d/c;        //每次移动的距离
    var n=0;   //初始化步数
    timer=setInterval(function(){
        n++;
        var cur=statrt+n*s;
        obj.style[name]=cur+'px';  
                //[]语法是使用参数的方法
                // .语法在这里是不可以用的
        if(n==c){//移动结束的时候
            clearInterval(time);//清除定时器
            fn && fn();//有方法的时候调用方法，
                     //没有的时候什么都不做。
        };
    },30);  // 定时器里设定时间都是固定的  但是这些时间都是有误差的
              //30ms是定时器中误差最小的 ±3  并且运行起来感觉是最好的
}                     

调用封装的方法

var oDiv=document.getElementById("div");
oDiv.onclick=function(){
    move(oDiv,'left',500,300)  //最后一个回调函数可以不传
};

function getStyle(obj,name){
     if(obj.currentStyle){    //有当前样式的时候
           return obj.currentStyle[name];　　//返回当前的样式自带单位  只兼容chrome  firefox
     }else{
           return getComputedStyle(obj,false)[name];　　//一样的 只兼容 IE
     };
};

这次的只是匀速运动的。下次分享变速的  哈哈~