Explain in detail what tween.js is (graphic tutorial)

The following is the content about tween.js that I have compiled for you. Interested students can check it out.

First post the basic knowledge, and then explain how to use Tween.js:

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

Easing function:

1.linear 匀速
2.Quad 二次方缓动效果
3.Cubic 三次方缓动效果
4.Quart 四次方缓动效果
5.Quint 五次方缓动效果
6.Sine  正弦缓动效果
7.Expo  指数缓动效果
8.Circ  圆形缓动函数
9.Elastic 指数衰减正弦曲线缓动函数
10.Back  超过范围的三次方的缓动函数
11.Bounce 指数衰减的反弹曲线缓动函数

Each easing function Both have three effects:

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

Note: linear has only one effect, uniform

Each function has four parameters:

1.t====> current time:当前时间.解释为:开始的步数(一般从0开始),预示着一段动画的开始.
2.b====>beginning value  初始值.解释为:开始量(开始的属性值)
3.c====>change in value  变化量.解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值
4.d====>duration 持续时间.解释为:结束的步数(运动的总时间)

Note: When the number of starting steps increases When the number of steps is equal to the end step, the entire movement ends. Note: The movement will only end when t increases to be equal to d; if not, the movement will not stop.

Use of tween.js 1 . Download 2. Import 3. Use tween.js syntax

Tween. Easing function name. Easing effect name (t, b, c, d);

If you see the above If you already understand it, you can skip the following part. The following is an explanation of Tween.js. Next, we will introduce how to use this Tween. First, the three parameters b, c, and d (i.e. initial value, change amount, duration) are slowed down. Before starting the action, it needs to be determined. First, introduce a concept of tweening animation. Flash uses the Tween class when doing animations. It can be used to create many animation effects, such as easing, spring, etc. tween.js can be interpreted as tweening animation in Flash. So the question is, what is tweening animation?

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

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

重点来了:

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

    或者这样理解：

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

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

相关文章：

JS实现摩天轮抽奖

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

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

The above is the detailed content of Explain in detail what tween.js is (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!