(13)前端好好玩用 GSAP 做一個特效 - 動畫事件

發表於 2023-01-08 分類於 GSAP

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

我們在實際開發上往往可能會需要當動畫執行完畢時，執行某些動作，那麼 GSAP 也有嗎？因此這一篇將會來介紹 GSAP 的動畫事件。

前言

我們在實際開發上往往可能會需要當動畫執行完畢時，執行某些動作，那麼 GSAP 也有嗎？因此這一篇將會來介紹 GSAP 的動畫事件。

首先先讓我們來看一下 GSAP 的動畫事件有哪些：

那麼這每一個事件各代表什麼意思呢？首先先讓我們看一下範例程式碼

gsap.to(".box", {
  x: 500,
  duration: 1,
});

上面是一個我們最簡單的動畫，接著會一個一個介紹每個動畫事件觸發的時機。

第一個動畫事件是 onStart，這個動畫事件觸發的時機在於動畫開始執行時，因此當我們期望動畫開始執行時，就執行某些行為的話，就會使用到這個動畫事件。

gsap.to("#box", {
  x: 500,
  duration: 1,
  onStart() {
    console.log("onStart");
  },
});

請注意，這個 onStart 事件會在動畫開始時就觸發，因此如果你使用了 alert 時，你會發現動畫會先卡住，然後等你按下確認後，才會繼續執行動畫。

第二個動畫事件是 onUpdate，這個動畫事件的觸發時機是在動畫執行過程中，因此如果你的動畫執行過程中期望同時觸發某些事情的話，那就可以使用 onUpdate 事件。

gsap.to("#box", {
  x: 500,
  duration: 1,
  onUpdate() {
    console.log("onUpdate");
  },
});

這個過程中，你會發現 console.log("onUpdate"); 會一直被觸發。

onComplete 相對簡單很多，當動畫完成時，就會觸發 onComplete 事件。

gsap.to("#box", {
  x: 500,
  duration: 1,
  onComplete() {
    console.log("onComplete");
  },
});

onRepeat 事件是在動畫重複執行時觸發，因此如果你的動畫有設定重複執行的話，就會觸發 onRepeat 事件。

gsap.to("#box", {
  x: 500,
  duration: 1,
  repeat: -1,
  onRepeat() {
    console.log("onRepeat");
  },
});

onReverseComplete 事件是在動畫反向執行完成時才會觸發的事件，但實際上來講這個事件的使用時機並不多，因此我們通常還是比較常用 onComplete 為主，這邊就不額外介紹 onReverseComplete 事件了。

那麼這些動畫事件的使用時機我們大致上都知道了，所以我們就往下一篇去囉。