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

前言

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

動畫事件

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

• onStart
• onUpdate
• onComplete
• onRepeat
• onReverseComplete

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

1
2
3
4

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

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

onStart

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

1
2
3
4
5
6
7

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

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

onUpdate

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

1
2
3
4
5
6
7

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

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

onComplete

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

1
2
3
4
5
6
7

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

onRepeat

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

1
2
3
4
5
6
7
8

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

onReverseComplete

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

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