动画库之 - tween.js

2019独角兽企业重金招聘Python工程师标准>>>

       Tween.js

  作用：  tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

JS动画与CSS动画性能比较：可点击查阅

  原理：

下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。 

举一个简单的例子，一个div要向右缓动，left初始值是50，那么b就是50，要向右移动100，那c就是100，如果知道的是目标值，例如要向右移动到150，那就把目标值150减初始值b就是变化量c了。 

至于d的设置就比较灵活，只要符合t是从0向d递增（或递减）就可以了。 
d跟步长配合使用来设置持续时间，例如d设置为100，如果设置步长是1，那么从0到100就有100步，即分100次来完成这个过程，步数越多那么持续时间就越长。 

至于t的变化相当于时间的变化，一般是均匀变化的，每次变化都增加一个步长，当t从0递增（或递减）到d时，缓动就结束了。 

要注意的是t是从0开始的，设置步长时必须确定t确实能到达d，如果上面的步长是3，那么t就永远都到不了d了。更好的处理是当t等于或超过d之后，就停止定时器并设置当前值为目标值。

easeIn：从0开始加速的缓动； 
easeOut：减速到0的缓动； 
easeInOut：前半段从0开始加速，后半段减速到0的缓动。 
Linear是无缓动效果，没有以上效果。

面向过程案例举例：   

      网页部分：

    

     代码部分：1.css样式未展示； 2.需引用tween.js  

    

    tween.js下载  ： 点这里

转载于:https://my.oschina.net/sundaren/blog/709502