本篇文章主要介紹了詳解tween.js的使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
前面的話
TweenJS提供了一個簡單但強大的漸變界面。它支持漸變的數字對象屬性&CSS樣式屬性,並允許鏈接補間動畫和行動結合起來,創造出複雜的序列。本文將詳細介紹tween.js的使用
概述
tween.js允許以平滑的方式修改元素的屬性值。只需要告訴tween想修改什麼值,以及動畫結束時它的最終值是什麼,動畫花費多少時間等信息,tween引擎就可以計算從開始動畫點到結束動畫點之間值,來產生平滑的動畫效果
例如,假設有一個對象position,它的座標爲 x 和 y:
1 |
|
如果想改變 x 的值從100到200,只需要這樣做:
1 2 3 4 5 |
|
到這裏只是創建了tween對象,需要激活它,讓它開始動畫:
1 2 |
|
最後爲了平滑動畫效果,需要在同一個循環動畫中調用TWEEN.update方法。代碼如下:
1 2 3 4 5 6 7 8 |
|
這個動作將會更新所有被激活的tweens,在1秒鐘(例如1000ms)position.x 將變爲200。
也可以使用onUpdate回調函數將結果打印到控制檯上
1 2 3 |
|
這個函數在每次tweens被更新時都被調用。它的出現頻次依賴於很多因素。例如:依賴於你的電腦或設備的運行速度
開始動畫
Tween.js本身不會運行,需要通過update方法明確的告訴它什麼時候開始運行。推薦在動畫主循環中使用該方法。可以通過調用requestAnimationFrame方法來獲得良好的圖像性能
1 2 3 4 5 6 7 8 |
|
這裏使用無參數調用方式,update方法將明確當前時間,以便於獲取上一次動畫的執行時間。
也可以爲update方法明確一個時間:
1 |
|
上面語句的意思是說:update的時間=100毫秒。可以使用這種方法來明確代碼中所有隨時間變化的函數。例如,動畫已經開始,想所有動畫都同步進行,animate代碼改成這樣:
1 2 |
|
控制動畫
【start和stop】
Tween.start和Tween.stop分別用於控制tween動畫的開始和結束
對於已經結束和沒有開始的動畫,Tween.stop方法不起作用。Tween.start方法同樣接收一個時間參數。如果使用了該參數,tween動畫將在延時該時間數後纔開始動畫。否則它將立刻開始動畫
【update】
可以通過TWEEN.update方法來執行動畫的更新
【chain】
如果你製作多個多行,例如:一個動畫在另一個動畫結束後開始。可以通過chain方法來使實現。如下代碼,tweenB 在 tweenA 之後開始動畫
1 |
|
可以像下面這樣製作一個無限循環的動畫:
1 2 |
|
【repeat】
如果你製作循環動畫可以使用chain來實現,但是更好的方法是使用repeat方法。它接收一個用於描述想循環多少次的參數
1 2 |
|
【yoyo】
這個函數只在使用repeat方法時起作用。當它被激活時,tween的效果類似yoyo球效果。該效果是動畫會在開始或結束處向反方向反彈
【delay】
delay方法用於控制動畫之間的延時
1 2 |
|
全局方法
以下的方法定義在 TWEEN 的全局對象中,其中大多數方法都用不上,除了update方法:
【TWEEN.update(time)】
該方法用於所有被激活的tweens,如果time沒有被指定,將使用當前時間。
【TWEEN.getAll 和 TWEEN.removeAll】
這兩個方法用於獲取被激活的tweens數組的一個引用,或從數組中刪除所有tweens。
【TWEEN.add(tween) 和 TWEEN.remove(tween)】
用於向被激活的tweens中添加一個tween,或移除一個tween
easing函數
tween.js提供了一些可用的easing函數。可用函數有:Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 類型分爲: In, Out 和 InOut
不但可以使用tween.js提供的easing函數,還可以自定義easing函數。但必須遵守下面的規則
1、它必須接收一個參數
2、它必須基於輸入參數返回一個值
easing函數僅在每個tween每次被更新時調用,而不管有多少屬性被改變。結果隨後會被用於初始值
1 2 3 |
|
下面是一個使用Math.floor來做easing效果的例子:
1 2 3 |
|
可以在tween 這樣使用它
1 |
|
回調函數
另外一個有用的特性是可以在每次tween循環週期的指定時間點調用自定義的函數。
例如:假設想使一些不能直接修改參數的對象執行動畫,要訪問該對象的參數只能通過setter方法,可以通過update方法的回調函數來設置新的setter值
1 2 3 4 5 6 7 8 9 |
|
或者如果想確認tween動畫開始後某個對象指定狀態下的某個值,可以通過start回調來獲取它:
1 2 3 4 5 |
|
【onStart】
tween開始動畫前的回調函數。
【onStop】
tween結束動畫後的回調函數。
【onUpdate】
在tween每次被更新後執行。
【onComplete】
在tween動畫全部結束後執行。
以上就是本文的全部內容,希望對大家的學習有所幫助,