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 指数衰减的反弹曲线缓动函数

各イージング関数には3つの効果があります:

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

注:線形の効果は1つだけです均一速度

各関数には 4 つのパラメータがあります:

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 構文を使用します

イージング関数名 (t, b, c, d);

上記を理解している場合は、次の部分をスキップしてください。 以下は、Tween.js の説明です。 次に、この Tween の 3 つのパラメーター (つまり、初期値) の使用方法を紹介します。 、変化量、期間）は、イージングを開始する前に決定する必要があります。 まず、トゥイーン アニメーションの概念を紹介します。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 中国語 Web サイトの他の関連記事を参照してください。