學習 PixiJS — 補間動畫

說明

補間動畫指的是，咱們能夠經過爲精靈的位置、比例、透明度，等屬性，設置開始值和結束值，製做動畫，動畫中間須要的部分由軟件自動計算填充。

Pixi 沒有內置補間引擎，可是你可使用不少很好的開源的補間庫，好比 Tween.js 和 Dynamic.js 。若是要製做很是專業的自定義補間效果，可使用這兩個庫中的其中一個。可是如今咱們要使用的是一個名爲 Charm.js 的專門用於 Pixi 的補間庫。

使用 Charm 庫

要開始使用 Charm ，首先直接用 script 標籤，引入 js 文件

<script src="https://www.kkkk1000.com/js/Charm.js"></script>
複製代碼

而後建立它的實例

let c = new Charm(PIXI);
複製代碼

變量 c 如今表明 Charm 實例。

和前面的文章中講到的粒子效果同樣，在調用 state 函數以後，必須爲遊戲循環中的每一個幀更新補間。就是在遊戲循環中調用 Charm 的 update 方法，以下所示：

function gameLoop() {
    requestAnimationFrame(gameLoop);
    state();
    c.update();
    renderer.render(stage);
}
複製代碼

滑動補間

Charm 最有用的補間效果之一是 slide 。使用 slide 方法可使精靈從畫布上的當前位置平滑移動到任何其餘位置。slide 方法有七個參數，但只有前三個參數是必需的。

名稱	默認值	描述
anySprite		須要移動的精靈
finalXPosition		滑動結束時 x 座標
finalYPosition		滑動結束時 y 座標
durationInFrames	60	補間須要的幀數，也就是動畫應該持續多長時間
easingType	"smoothstep"	緩動類型
yoyo	false	用於肯定精靈是否應在補間的起點和終點之間來回移動。
delayTimeBeforeRepeat	0	一個以毫秒爲單位的數字，用於肯定精靈 yoyo 以前的延遲時間。

示例：

如下是如何使用 slide 方法使精靈用120幀從原始位置移動到座標爲(128,128)的位置的關鍵代碼。

c.slide(sprite, 128, 128, 120);
複製代碼

效果圖：

查看示例

若是你想讓精靈在起點和終點之間來回移動，請將 yoyo（第六個參數）設置爲 true，代碼以下所示：

c.slide(sprite, 128, 128, 120, "smoothstep", true);
複製代碼

查看示例

補間對象

Charm 全部的補間方法都返回一個補間對象，你能夠這樣建立：

let slidePixie = c.slide(sprite, 80, 128, 120, "smoothstep",true);
複製代碼

slidePixie 就是補間對象，它包含一些有用的屬性和方法，能夠用於控制補間。

其中一個是 onComplete 方法，它將在補間完成後當即運行。如下代碼是精靈到達終點時如何使用 onComplete 方法在控制檯中顯示消息。

let slidePixie = c.slide(sprite, 80, 128, 120, "smoothstep",true);
slidePixie.onComplete = () => console.log("一次滑動完成");
複製代碼

若是將 yoyo （slide 方法的第六個參數）設置爲 true，則每當精靈到達其起點和終點時，onComplete 方法都將運行。

補間還有 pause 和 play 方法，能夠中止和開始補間。

slidePixie.pause();
slidePixie.play();
複製代碼

補間對象還具備 playing 屬性，若是補間當前正在播放，則該屬性值爲 true。只不過有些補間方法返回的對象中直接有 playing 屬性，有些補間方法返回的對象中的 playing 屬性是在一個叫 tweens 的數組中， tweens 數組中包括了這個補間方法建立的全部補間對象。 以 slide 方法爲例，完成一個滑動須要建立 x 軸補間對象和 y 軸補間對象，這兩個對象都放在了 tweens 數組中，這兩個對象也都分別有 playing 屬性。

查看示例

全部 Charm 的補間方法都返回你能夠控制和訪問的補間對象。

設置緩動類型

slide 方法的第四個參數是 easingType 。它是一個字符串，用於肯定補間加速和減速的類型。這些類型共有15種可供選擇，而且它們對於 Charm 的全部不一樣補間方法都是相同的。某些類型對應的會有一個基本類型，一個 squared 類型和一個cubed 類型。squared 類型和 cubed 類型只是將基本類型的效果放大而已。大多數 Charm 的補間效果的默認緩動類型是 smoothstep。

Linear： linear，精靈從開始到中止保持勻速運動。

Smoothstep： smoothstep，smoothstepSquared，smoothstepCubed。加速精靈並以很是天然的方式減慢速度

Acceleration： acceleration， accelerationCubed。逐漸加速精靈並忽然中止。 若是要更加平滑的加速效果，請使用 sine，sineSquared 或 sineCubed。

Deceleration： deceleration，decelerationCubed。忽然加速精靈並逐漸減慢它。要得到更加平滑的減速效果，請使用inverseSine，inverseSineSquared或inverseSineCubed。

Bounce： bounce 10 -10 ，這將使精靈到達起點和終點時略微反彈，更改乘數10和 -10，能夠改變效果。

查看示例

使用 slide 進行場景過渡

你在遊戲或應用程序中確定要作的一件事就是讓場景過渡，而後將新場景滑入視圖。它多是你遊戲的標題滑動以顯示遊戲的第一級，或者多是一個菜單，能夠滑動以顯示更多的應用程序內容。你可使用 slide 方法執行此操做。

首先，建立兩個容器對象：sceneOne 和 sceneTwo，並將它們添加到舞臺上。

sceneOne = new Container();
sceneTwo = new Container();
stage.addChild(sceneOne);
stage.addChild(sceneTwo);
複製代碼

接下來，爲每一個場景建立精靈。製做一個像畫布同樣大的藍色矩形； 並在矩形中間添加上 Scene One 的文字，將二者都添加到 sceneOne 容器中。再製做一個像畫布同樣大的紅色矩形；並在矩形中間添加上Scene Two 的文字，將這二者添加到 sceneTwo 容器中。你最終獲得的兩個容器對象，以下圖所示。

如下是關鍵代碼：

//1. Scene one sprites: 
//畫藍色矩形
let blueRectangle = new PIXI.Graphics();
blueRectangle.beginFill(0x014ACA);
blueRectangle.drawRect(0, 0, canvasWith, canvasHeight);
blueRectangle.endFill();
sceneOne.addChild(blueRectangle);

//添加文字，並在容器中居中
let sceneOneText = new PIXI.Text("Scene One");
sceneOneText.style = { fill: "#fff", fontSize: "40px" };
let sceneOneTextX = (canvasWith - sceneOneText.width) / 2;
let sceneOneTextY = (canvasWith - sceneOneText.height) / 2;
sceneOneText.position.set(sceneOneTextX, sceneOneTextY);
sceneOne.addChild(sceneOneText);

//2. Scene two sprites:
//畫紅色矩形
let redRectangle = new PIXI.Graphics();
redRectangle.beginFill(0xEF4631);
redRectangle.drawRect(0, 0, canvasWith, canvasHeight);
redRectangle.endFill();
sceneTwo.addChild(redRectangle);

//添加文字，並在容器中居中
let sceneTwoText = new PIXI.Text("Scene Two");
sceneTwoText.style = { fill: "#fff", fontSize: "40px" };
let sceneTwoTextX = (canvasWith - sceneTwoText.width) / 2;
let sceneTwoTextY = (canvasHeight - sceneTwoText.height) / 2;
sceneTwoText.position.set(sceneTwoTextX, sceneTwoTextY);
sceneTwo.addChild(sceneTwoText);
複製代碼

在一個真實的項目中，你能夠爲每一個容器填充每一個場景所需的精靈數量，你也能夠爲你的項目添加儘量多的場景容器。

接下來，將 sceneTwo 移開，使其位於畫布的右邊緣以外。代碼以下所示：

sceneTwo.x = canvasWith;
複製代碼

這將在畫布上顯示 sceneOne，而 sceneTwo 在須要時會從左側滑出，以下所示。

sceneTwo 就在屏幕外等着。

最後，使用 slide 方法從 sceneOne 過渡到 sceneTwo 。只需將 sceneOne 滑動到左側，而後從右側滑動 sceneTwo ，取代它的位置，代碼以下。

c.slide(sceneTwo, 0, 0);
c.slide(sceneOne, -canvasWith, 0);
複製代碼

下圖顯示了這段代碼的效果。

查看示例

時間過渡

你能夠自定義一個 wait 函數在設定的時間間隔後進行過渡。

function wait(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    });
}
複製代碼

要使用 wait，請爲其提供一個參數，它表明你但願等待的時間（以毫秒爲單位）。如下是在延遲1秒（1000毫秒）後從 sceneOne 過渡到 sceneTwo 的方法。

wait(1000).then(() => {
    c.slide(sceneTwo, 0, 0);
    c.slide(sceneOne, -canvasWith, 0);
});
複製代碼

查看示例

其實在 Charm 庫中已經定義了 wait 這個方法，原理和上面的 wait 函數是同樣的。你能夠這樣使用它。

c.wait(1000).then(() => {
    c.slide(sceneTwo, 0, 0);
    c.slide(sceneOne, -canvasWith, 0);
});
複製代碼

沿貝塞爾曲線移動

若是你還不清楚什麼是貝塞爾曲線，能夠先看看這篇文章。

slide 方法沿直線爲精靈製做動畫，但你也可使用另外一種方法（followCurve）使精靈沿貝塞爾曲線移動。首先，將貝塞爾曲線定義爲4個座標點的二維數組，以下所示：

let curve = [
    [sprite.x, sprite.y], //起始點
    [108, 32], //控制點1
    [176, 32], //控制點2
    [196, 160] //結束點
];
複製代碼

followCurve 方法的參數以下：

名稱	默認值	描述
anySprite		須要移動的精靈
curve		貝塞爾曲線數組
durationInFrames	60	補間須要的幀數，也就是動畫應該持續多長時間
easingType	"smoothstep"	緩動類型
yoyo	false	用於肯定精靈是否應在補間的起點和終點之間來回移動。
delayTimeBeforeRepeat	0	一個以毫秒爲單位的數字，用於肯定精靈 yoyo 以前的延遲時間。

接下來，使用 Charm 的 followCurve 方法使精靈跟隨該曲線。（提供 curve 數組做爲第二個參數）

c.followCurve(
 sprite, //須要移動的精靈
 curve, //貝塞爾曲線數組
 120, //持續時間，以幀爲單位
 "smoothstep", //緩動類型
 true, //yoyo
 1000 //yoyo以前的延遲時間
);
複製代碼

效果圖：

若是你須要使精靈的中點沿着曲線移動，還須要設置精靈的錨點（anchor）居中，以下所示：

sprite.anchor.set(0.5, 0.5);
複製代碼

查看示例

slide 和 followCurve 方法適用於簡單的來回動畫效果，但你也能夠結合它們以使精靈遵循更復雜的路徑。

沿路徑移動

你可使用 Charm 的 walkPath 方法鏈接一系列點，並使精靈移動到每一個點。該系列中的每一個點都稱爲 waypoint 。首先，從由座標點組成的二維數組定位路徑點開始，這些 waypoint 映射出你但願精靈遵循的路徑。

let waypoints = [
 [32, 32], //要移動到的第一個座標點
 [32, 128], //要移動到的第二個座標點
 [300, 128], //要移動到的第三個座標點
 [300, 32], //要移動到的第四個座標點
 [32, 32] //要移動到的第五個座標點
];
複製代碼

你能夠根據須要使用任意多的 waypoint。

walkPath 方法的參數以下：

名稱	默認值	描述
anySprite		須要移動的精靈
waypoints		座標點的二維數組
durationInFrames	60	補間須要的幀數，也就是動畫應該持續多長時間
easingType	"smoothstep"	緩動類型
loop	false	用於肯定精靈在到達結尾時是否從頭開始
yoyo	false	用於肯定精靈是否應在補間的起點和終點之間來回移動。
delayBetweenSections	0	一個以毫秒爲單位的數字，用於肯定精靈在移動到路徑的下一部分以前應該等待的時間。

接下來，使用 walkPath 方法使精靈按順序移動到全部這些點。（前兩個參數是必需的）

c.walkPath(
    sprite, //須要移動的精靈
    waypoints, //座標點的二維數組
    300, //持續時間，以幀爲單位
    "smoothstep", //緩動類型
    true, //循環
    true, //輪流反向播放動畫
    1000 //移動到路徑的下一部分以前應該等待的時間
);
複製代碼

效果圖：

查看示例

而使用 walkCurve 方法，可使精靈遵循一系列鏈接的貝塞爾曲線。首先，建立任何貝塞爾曲線數組，描述你但願精靈遵循的路徑。

let curvedWaypoints = [
 //第一條曲線
 [[sprite.x, sprite.y],[75, 500],[200, 500],[300, 300]],
 //第二條曲線
 [[300, 300],[250, 100],[100, 100],[sprite.x, sprite.y]]
];
複製代碼

每條曲線的四個點與 followCurve 方法中的相同：起始位置，控制點1，控制點2和結束位置。第一條曲線中的最後一個點應與下一條曲線中的第一個點相同。你能夠根據須要使用盡量多的曲線。

walkCurve 方法的參數以下：

名稱	默認值	描述
anySprite		須要移動的精靈
curvedWaypoints		貝塞爾曲線的座標點的數組
durationInFrames	60	補間須要的幀數，也就是動畫應該持續多長時間
easingType	"smoothstep"	緩動類型
yoyo	false	用於肯定精靈是否應在補間的起點和終點之間來回移動。
delayBeforeContinue	0	一個以毫秒爲單位的數字，用於肯定精靈yoyo以前的延遲時間。

接下來，提供 curvedWaypoints 數組做爲 walkCurve 方法中的第二個參數，來試試這個方法。

c.walkCurve(
    sprite, //須要移動的精靈
    curvedWaypoints, //貝塞爾曲線的座標點的數組
    300, //持續時間，以幀爲單位
    "smoothstep", //緩動類型
    true, //循環
    true, //輪流反向播放動畫
    1000 //移動到路徑的下一部分以前應該等待的時間
);
複製代碼

效果圖：

查看示例

使用 walkPath 和 walkCurve 將爲你提供了一個很好的開端，它們能夠爲遊戲製做一些有趣的動畫。

更多補間效果

Charm 有許多其餘內置的補間效果，你會發現它們在遊戲和應用程序中有不少用處。下面是其餘一些效果的介紹。

fadeOut 和 fadeIn fadeOut 方法使精靈逐漸變得透明，fadeIn 方法使精靈從透明逐漸顯現。這兩個方法須要的參數是同樣的。

參數：

名稱	默認值	描述
anySprite		須要產生效果的精靈
durationInFrames	60	持續的幀數

示例：

c.fadeOut(anySprite);
c.fadeIn(anySprite);
複製代碼

查看示例

pulse

使用 pulse 方法可使精靈以穩定的速率連續淡入淡出。

參數：

名稱	默認值	描述
anySprite		須要產生效果的精靈
durationInFrames	60	淡入淡出應該持續的幀數，也就是持續時間
minAlpha	0	精靈能夠減小到的最小的透明度值

示例：

c.pulse(anySprite);
複製代碼

查看示例

若是你只但願精靈在再次淡入以前變爲半透明，請將第三個參數設置爲0.5，以下所示：

c.pulse(anySprite, 60, 0.5);
複製代碼

scale

你可使用 scale 方法讓精靈產生縮放效果。

參數：

名稱	默認值	描述
anySprite		須要產生效果的精靈
endScaleX	0.5	x 軸縮放的比例
endScaleY	0.5	y 軸縮放的比例
durationInFrames	60	持續時間，以幀爲單位

示例：

c.scale(
    sprite, //精靈
    0.1, //x軸縮放的比例
    0.1, //y軸縮放的比例
    100 //持續時間，以幀爲單位
);
複製代碼

查看示例

breathe

若是你但願縮放效果來回 yoyo，請使用 breathe 方法。它是一種縮放效果，使精靈看起來好像在呼吸。

參數：

名稱	默認值	描述
anySprite		須要產生效果的精靈
endScaleX	0.5	x 軸縮放的比例
endScaleY	0.5	y 軸縮放的比例
durationInFrames	60	持續時間，以幀爲單位
yoyo	true	是否輪流反向播放
delayBeforeRepeat	0	一個以毫秒爲單位的數字，用於肯定精靈 yoyo 以前的延遲時間。

示例：

c.breathe(
    sprite, //精靈
    0.1, //x軸縮放的比例
    0.1, //y軸縮放的比例
    100, //持續時間，以幀爲單位
    true, //輪流反向播放 
    0, //yoyo 之間的延遲時間
);
複製代碼

查看示例

strobe

使用 strobe 方法經過快速改變精靈比例，使精靈看起來像閃光燈同樣閃爍。

參數： 只須要傳入一個精靈做爲參數便可。

示例：

c.strobe(sprite);
複製代碼

查看示例

wobble

使用 wobble 方法可使精靈像果凍同樣擺動。

參數： 只須要傳入一個精靈做爲參數便可。

示例：

c.wobble(sprite);
複製代碼

查看示例

若是你使用這些縮放補間效果（scale，breathe，strobe，或者 wobble），將精靈的錨點居中，就能夠從精靈的中心進行縮放。

sprite.anchor.set(0.5, 0.5);
複製代碼

注意：
目前， Charm 這個庫支持的 Pixi 版本是 3.0.11。若是使用比較高的版本會有一些問題，好比出現這樣的警告。

這是由於 Pixi 版本4.0.0起已棄用 ParticleContainer ，改成使用 particles.ParticleContainer 了。因此要解決這個問題須要把 Charm.js 文件中的 ParticleContainer 改成 particles.ParticleContainer 。

上一篇 學習 PixiJS — 視覺效果

下一篇 學習 PixiJS — 碰撞檢測