詳細為你解讀tween.js是什麼(圖文教學)

以下是我要幫大家整理的有關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:总步数

上面是我整理给大家的有关tween.js内容，希望今后会对大家有帮助。

相关文章：

JS实现摩天轮抽奖

js验证出生日期正则表达式

JS原始值与引用值有哪些储存方式

以上是詳細為你解讀tween.js是什麼(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章！