tween.js详解

大家好，欢迎来到IT知识分享网。

demo演示：点击打开链接；

演示地址2：点击打开链接；

轮播图demo演示：点击打开链接

github 地址：https://github.com/fuyz/tween.js

先贴下基础知识,然后在解释如何使用Tween.js：

1.第三方动画 tween.js

2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度)

缓动函数:

1.linear 匀速

2.Quad 二次方缓动效果
3.Cubic 三次方缓动效果
4.Quart 四次方缓动效果
5.Quint 五次方缓动效果

6.Sine  正弦缓动效果
7.Expo  指数缓动效果
8.Circ  圆形缓动函数

9.Elastic 指数衰减正弦曲线缓动函数
10.Back  超过范围的三次方的缓动函数
11.Bounce 指数衰减的反弹曲线缓动函数

每种缓动函数都由三种效果:

1.easeIn  加速
2.easeOut 减速
3.easeInOut  先加速后减速

注:linear 只有一种效果匀速

每个函数都有四个参数:

1.t====> current time:当前时间.解释为:开始的步数(一般从0开始),预示着一段动画的开始.

2.b====>beginning value  初始值.解释为:开始量(开始的属性值)

3.c====>change in value  变化量.解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值

4.d====>duration 持续时间.解释为:结束的步数(运动的总时间)

注意:当开始步数增加到与结束步数相等时,整个运动结束. 注注意:只有当t增加到与d相等时才会结束运动;如果不等,运动不会停止.

tween.js的使用 1.下载 2.引入 3.使用tween.js语法

Tween.缓动函数名.缓动效果名(t,b,c,d);

如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。 tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢?

相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动； 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的

那么什么是关键帧呢? 举个栗子: 先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.而这条线就代表对象的运动轨迹.

重点来了:

t:代表第一个点,也就是第一帧,也就是一个动画开始的地方.
b:代表初始值,也就是开始量,我们看电影或者动画一般都不会看序幕把,那么跳过开头部分,选择第一帧和最后一帧之间你要开始看位置,而此位置就是初始值.
c:代表的就是最后一帧减去初始值就是变化量,
d:代表最后一帧,1s的结束,也是动画的结束

    或者这样理解：

 t:当前步数
 b:初始位置
 c:总距离(变化量)
 d:总步数

简单小案例:请参照demo