(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 事件了。

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