tween.js一个平滑动效果的js动画库

待我称王封你为后i 2022-06-12 05:24 340阅读 0赞

## tween.js一个平滑动效果的js动画库 ##

1.  tween.js是什么？  
    tween.js是一款可生成平滑动效果的js动画库，允许以平滑的方式修改元素的属性值。
2.  tween.js达到什么效果？  
    它可以通过设置，生成各种类似CSS3的动画效果。
3.  tween.js的参数有哪些？  
    tween.js中的方法接收4个参数：t,b,c,d,分别是：  
        t：current time 当前时间;  
        意思为：开始的步骤（一般从0开始），预示着一段动画的开始；  
        b beginning value 初始值;  
        意思为：开始量(开始的属性值);  
        c change in value 变化量;  
        意思为：属性值的该变量，即结束位置的属性值 - 开始位置的属性值;  
        d duration 持续时间;  
        意思为：结束的步数（运动的总时间)。
4.  tween.js的效果：  
    Linear：线性匀速运动效果；  
    Quadratic：二次方的缓动（t^2）；  
    Cubic：三次方的缓动（t^3）；  
    Quartic：四次方的缓动（t^4）；  
    Quintic：五次方的缓动（t^5）；  
    Sinusoidal：正弦曲线的缓动（sin(t)）；  
    Exponential：指数曲线的缓动（2^t）；  
    Circular：圆形曲线的缓动（sqrt(1-t^2)）；  
    Elastic：指数衰减的正弦曲线缓动；  
    Back：超过范围的三次方缓动（(s+1)\*t^3 – s\*t^2）；  
    Bounce：指数衰减的反弹缓动。  
    tween.js文件就是对tween.js动画效果进行编译：(不压缩约150行代码)  
    ![这里写图片描述][SouthEast]
5.  tween.js的运用：  
    easeIn：从0开始加速的缓动，慢->快；  
    easeOut：减速到0的缓动，快->慢；  
    easeInOut：前半段从0开始加速，后半段减速到0的缓动；  
    注意：linear只有一种效果，匀速；

6.参考代码：  
    先将tween.js文件引入到html文件中；

var t=0,
        b=0,
        c=500,
        d=50;
    function Run(){ 
        box.style.left = Tween.Back.easeIn(t, b, c, d) + "px";  
        if (t < d) {
            t++;
            setTimeout(Run, 10);
        }
        //通过以下代码可以观察在变化过程中tween.js四个参数的变化； 
        console.log("t"+t+"b"+b+"c"+c+"d"+d);
        }
    Run();

动画效果：  
![这里写图片描述][SouthEast 1]

上面的代码的动画：移动距离（变化量）为500px，移动时间（持续时间）为50毫秒，动画效果与参数定义相同；

再看看下面代码的动画效果~

if (t <= d) { t++; requestAnimationFrame(Run); } else { t++; setTimeout(Run, 10); }

动画效果：  
![这里写图片描述][SouthEast 2]  
红色方块去哪了？七月天气这么热，你跑得这么快，还不停；

由此可见：上面的代码忽略c（变化量）、d（持续时间）的限定；  
当然，tween.js还有很多可用的动画效果，大侠们可以根据自己的需要合理使用，能够起到很好的效果！

[SouthEast]: /images/20220612/e154219a57cf4c70b4650e04989eab59.png
[SouthEast 1]: /images/20220612/1743b943802540c490fd80c227169b99.png
[SouthEast 2]: /images/20220612/7074136137764699a227600feae0c2aa.png