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

关于tween.js 封装的方法

时间:2017-06-13 23:52:20      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:star   class   没有   time   bsp   ++   tin   --   tween   

今天做的是匀速情况下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)  //最后一个回调函数可以不传
};

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

关于tween.js 封装的方法

标签:star   class   没有   time   bsp   ++   tin   --   tween   

原文地址:http://www.cnblogs.com/u-lhy/p/7003840.html

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