iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 41

[Re:PixiJS - Day41] 將 PixiJS 的 ticker 替換為 GSAP 的 ticker

同前幾篇 GSAP 的 PixiPlugin 介紹

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


原理:

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

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


改寫 PixiJS example:

  • 原本的程式碼:透過 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 與 動態製作


上一篇
[Re:PixiJS - Day40] GSAP 的 yoyoEase
下一篇
[Re:PixiJS - Day42] dat.gui 小技巧 .name() / .listen() / .remember(obj)
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言