Erklären Sie im Detail, was tween.js ist (grafisches Tutorial)

Das Folgende ist der Inhalt von tween.js, den ich für Sie zusammengestellt habe. Interessierte Studenten können einen Blick darauf werfen.

Veröffentlichen Sie zuerst die Grundlagen und erklären Sie dann, wie Sie Tween.js verwenden:

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

Beschleunigungsfunktion:

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

Jede Beschleunigungsfunktion Sie haben alle drei Effekte:

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

Hinweis: Linear hat nur einen Effekt, gleichmäßig

Jede Funktion hat vier Parameter:

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

Hinweis: Wenn die Anzahl der Startschritte zunimmt. Wenn die Anzahl zunimmt Die Anzahl der Schritte entspricht dem Endschritt. Hinweis: Die Bewegung endet erst, wenn t auf d ansteigt. Andernfalls wird die Bewegung nicht gestoppt 1. Herunterladen 2. Importieren 3. Verwenden Sie die tween.js-Syntax

Beschleunigungseffektname (t, b, c, d); Wenn Sie es bereits verstanden haben, können Sie den folgenden Teil überspringen. Als nächstes stellen wir vor, wie dieses Tween verwendet wird Menge, Dauer) verlangsamt werden. Vor Beginn der Aktion muss diese festgelegt werden. Führen Sie zunächst ein Konzept für Tweening-Animationen ein. Flash verwendet die Tween-Klasse, wenn Sie Animationen erstellen. Sie kann zum Erstellen vieler Animationseffekte wie Beschleunigung, Federung usw. verwendet werden. tween.js kann als Tweening-Animation in Flash interpretiert werden. Die Frage ist also: Was ist Tweening-Animation?

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

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

重点来了:

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

    或者这样理解：

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

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

相关文章：

JS实现摩天轮抽奖

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

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

Das obige ist der detaillierte Inhalt vonErklären Sie im Detail, was tween.js ist (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!