深入學習Phaser補間動畫

tweens通常被稱為補間動畫。補間動畫是指在確定好兩個關鍵幀之後，由計算機自動生成這兩幀之間插補幀，從而實現動畫的過程。例如，物體從當前位置在兩秒內向右移動200個畫素，只要設定好目標位置（當前位置的右邊200畫素）和時長（兩秒），則計算機會自動生成補間動畫，在兩秒內使物體從當前位置移到目標位置。

最常見的建立乙個補間動畫的語句如下所示：

var tween =this.game.add.tween(this.sprite).to(, 5000,phaser.easing.linear.none, false, 0, -1, true);
tween.start();

第一句：呼叫phaser.game中的補間管理類建立乙個補間動畫tween。this.sprite表示針對這個精靈建立動畫，這裡也可以是乙個組。to()函式是最關鍵的函式，記錄著精靈的屬性變化、時長及其他相關屬性，關於這個函式，我們將在下文最詳細的介紹。

第二句：啟動動畫。

to(properties, duration, ease, autostart, delay, repeat, yoyo)

設定目標值。補間將從當前屬性值變為to函式設定的值（引數properties）

其引數如下：

在下面這幾句示例**中，分別設定了平移、旋轉、透明度變化的補間動畫：

// 平移
this.add.tween(boss).to(, 2000, phaser.easing.linear.none)
// 旋轉
sealifetween.to(,5000,phaser.easing.linear.none,true,0,1000,true);
// 透明度
fadetween.to(,2000,phaser.easing.cubic.out,true);

from(properties,duration, ease, autostart, delay, repeat, yoyo)

設定起始值。補間將從from函式設定的屬性值變為當前值

引數及其含義與to函式相同

repeat(total, index=0)

設定tween重複次數。total：重複次數，0表示不重複，-1表示一直重複。index：子tween編號。本函式可以對某個子tween單獨設定重複次數，-1表示對所有的子tween進行設定

repeatall(total)

設定當前tween和所有子tween的重複次數。tween a和三個子tween b,c,c，重複次數為2，則執行結果為：abcdabcd，然後再呼叫onloop。total：重複次數，0表示不重複，-1表示一直重複。

loop(value=true)

設定tween及其子tween是否迴圈。如果沒有子tween，則此函式無效；如果傳入true，則相當於tween.repeatall(-1)，如果傳入false，則相當於tween.repeatall(0)。

下面這段**使精靈先右移400畫素，再下移250畫素，再左移400畫素，再上移250畫素，然後不斷重複上面四步。實際上這個精靈就是不斷的在畫乙個矩形。

this.game.add.tween(this.sprite)
.to(, 2000)
.to(, 2000)
.to(, 2000)
.to(, 2000).loop().start();

pause();暫停補間

resume();

繼續補間

start(index=0)

啟動補間，並呼叫onstart。index：指定某個子tween啟動

stop(complete=false)

結束補間。如果補間正在執行，則設定乙個結束標誌。complete表示這個補間是否已經結束。只有當complete設定為true的時候，才會呼叫oncomplete，並啟動串聯的tween。

yoyo(enable, index= 0)

如果enable設定為true，則補間先從from到to，然後再從to到from。如果設定為false，則可以禁用已經啟用的yoyo。index：子tween編號，-1表示所有子tween

緩動函式是用來指定動畫效果在執行時的速度，使其看起來更加真實。現實物體照著一定節奏移動，並不是一開始就移動很快的。例如，當我們開啟抽屜時，首先會讓它加速，然後慢下來。當某個東西往下掉時，首先是越掉越快，撞到地上後回彈，最終才又碰觸地板。

在phaser中內建了十一種緩動函式：

phaser.easing()

其中，phaser.easing.linear是最基本的勻速運動。

另外十種動畫示例如下（摘自

tween開始的時候呼叫。如果在tween開始之前有乙個延時，則要等延時結束後才呼叫onstart

當tween和他的所有子tween重複的時候呼叫。如果tween沒有子tween，則不會呼叫

tween或者子tween迴圈的時候呼叫

當tween和他的所有子tween都結束時候呼叫。如果tween設定為迴圈或者repeatall(-1)，則不會呼叫。這個函式是最常用的，例如，當補間動畫balltween結束的時候，觸發adjustbalances()函式，在adjustbalances()函式中又建立了另乙個補間動畫balancetween，在其結束時觸發函式allowballfalling()：

balltween.oncomplete.add(adjustbalances,this);
function adjustbalances()
function allowballfalling()

當tween或者他的任意乙個子tween結束時呼叫。每乙個子tween結束的時候都會呼叫，除非無限迴圈下去

在game類中維護了乙個補間管理器tweens：

// core/game.js
phaser.game ()

補間管理裡主要用來管理補間動畫，常用的有增加、刪除、暫停、繼續某個補間動畫：

//  tween/tweenmanager.js
phaser.tweenmanager()

//  tween/tween.js
//  生成
to(properties, duration, ease, autostart,delay, repeat, yoyo)
from(properties, duration, ease, autostart,delay, repeat, yoyo)
//  控制
loop(value=true)  
repeat(total, index=0) 
repeatall(total)
pause();
resume();
start(index=0)
stop(complete=false)
yoyo(enable, index= 0)
//  響應
this.onstart(target, this);
this.onloop(target, this);
this.onrepeat(target, this);
this.onchildcomplete(target, this);
this.oncomplete(target, this);

on開頭的響應函式返回的都是phaser.signal()，signal具有如下方法：

//  core/signal.js
add()
addonce() 一次性的，即呼叫之後就會被刪掉
remove()
removeall()

關於補間動畫的例項教程可參見以下文章：

深入學習Phaser補間動畫

動畫補間動畫

Android 補間動畫學習

深入學習jQuery動畫佇列

深入學習Phaser補間動畫

動畫 補間動畫

Android 補間動畫學習

深入學習jQuery動畫佇列

相關推薦

動畫補間動畫