同前幾篇 GSAP 的 PixiPlugin 介紹：

PixiJS 官方範例上多了些 GSAP2 / GSAP3，這篇會介紹其中 Tick Director 的相關討論

• GSAP2-INTERACTION / GSAP 2 Tick Director
• GSAP3-INTERACTION / GSAP 3 Tick Director

原理：

GreenSock Animation Platform (GSAP) 有自己的 ticker 與方法

將 PIXI.Application 的 ticker 停止並改用 GSAP 的 ticker，就能使用 GSAP ticker 的方法

改寫 PixiJS example：

• 改寫兔子轉的基本範例 SPRITE - Basic：

• 原本的程式碼：透過 app.ticker 的更新，讓兔子每次的多旋轉一些

app.ticker.add((delta) => {
    bunny.rotation += 0.1 * delta;
});

• 停止 app.ticker ，並交由 GSAP 控制

// 此段完全不變
app.ticker.add((delta) => {
    bunny.rotation += 0.1 * delta;
});

// 新增這段
app.ticker.stop(); // 停止原本的 app.ticker
gsap.ticker.add(() => { // 當 gsap.ticker 更新時，同時讓 app.ticker 更新
    app.ticker.update();
});

由於是透過 gsap.ticker.add() 呼叫 app.ticker.update()，
因此原本 app.ticker.add(delta) 裡的資料也會傳入，並且可使用 GSAP.ticker 相關的方法

gsap.ticker 的各種用法：

由於已將 ticker 更換為 gsap.ticker，因此可直接使用 gsap.ticker 的相關功能
gsap.ticker 說明頁面

gsap.ticker.fps()

gsap.ticker.fps(30);

無法 超過60FPS，但可降速

[ Demo ]

• 設定 10FPS 時，左上方顯示為 10FPS，畫面降速

• 設定 100FPS 時，左上方顯示為 60FPS，畫面 維持60FPS

gsap.ticker.deltaRatio()

GSAP3.5 更新的方法，會回傳 gsap.ticker 與上次呼叫經過的時間差為 (60)FPS 的倍數

預設為 60FPS，也就是與 16.666ms/次 比較
當 gsap.ticker 以 60FPS 速度執行時，會得到接近 1 的數字

• 當 app 以 60FPS 執行時，deltaDatioo(60) 輸出倍率接近 1

• 當 app 以 30FPS 執行時，deltaDatioo(60) 輸出倍率接近 2

• 當 app 以 1FPS 執行時，deltaDatioo(60) 輸出倍率接近 60

使用情境： 讓動態依據相對應的倍率調整要更新的量

例如：讓兔子依照目前效能旋轉

app.ticker.add((delta) => {
    bunny.rotation += 0.1 * gsap.ticker.deltaDatioo(60);
});

然後會發現，這件事跟 PIXI.ticker 預設會做的事情類似

app.ticker.add((delta) => {
    bunny.rotation += 0.1 * delta;
});

所以 GSAP 的這個特色，目前還沒想到能怎麼用

gsap.ticker.lagSmoothing()

讓 CPU 來不及運算時，畫面看起來比較自然些

lagSmoothing() 官方介紹影片：

遇到 CPU 來不及運算時，通常就直接優化 CPU 的使用情形了
較少使用這個方法

GSAP.ticker 的 update

The gsap.ticker is like the heartbeat of the GSAP engine - it updates the globalTimeline on every requestAnimationFrame event, so it is perfectly synchronized with the browser’s rendering cycle

GSAP.ticker 的更新行為與 requestAnimationFrame event 相同，
因此也會在切換分頁、縮小視窗後降速。

今日心得：

可使用 GSAP Ticker 取代 PIXI.ticker，並使用 設定 FPS 等方法
如需處理切換分頁、縮小視窗後降速的問題，即使使用 GSAP Ticker 取代 PIXI.ticker，仍然需要另外處理

其他連結：
先前寫的 PIXI.Ticker 介紹：[PixiJS - Day-10] Ticker 與 動態製作