(12)前端好好玩用 GSAP 做一個特效 - 控制你的動畫

發表於 分類於

Google AD

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

Liker 讚賞

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

Buy Me A Coffee ｜ Buy Me A Coffee
至今為止我們的動畫都是透過呼叫來執行，但其實 GSAP 也提供了一些方法讓我們可以控制動畫，所以這一篇我們就要來認識這些方法。

前言

至今為止我們的動畫都是透過呼叫來執行，但其實 GSAP 也提供了一些方法讓我們可以控制動畫，所以這一篇我們就要來認識這些方法。

動畫控制

首先先讓我們看一下這次要使用的範例

1
2
3
4
5
gsap.to('#box1', {
  duration: 5,
  x: 500,
  ease: 'bounce.out',
});

我們可以看到這個範例就只能執行一次，而且執行過程中我們也無法暫停或反轉等行為，因此這邊要來介紹一個新的東西，也就是動畫控制，這些方法可以讓我們控制我們的動畫，例如播放、暫停、反轉或加速等。

這邊就讓我們看一下範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="box1" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr class="my-3"/>
<button id="play" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">播放</button>
|
<button id="stop" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">暫停</button>
|
<button id="reverse" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">反轉</button>
|
<button id="speedUp" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">動畫加速</button>
|
<button id="slowDown" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">動畫減速</button>
|
<button id="restart" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">重新開始</button>
|
<button id="seek" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">跳轉到特定秒數</button>
|
<button id="progress" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">當前動畫進度(1 代表結束)</button>
|
<button id="timeScale" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">當前動畫速度</button>
|
<button id="kill" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">殺死動畫(按下後動畫即失效)</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const tween = gsap.to('#box1', {
  duration: 10,
  x: 500,
  ease: 'bounce.out',
});

document.getElementById('play').addEventListener('click', () => {
  tween.play();
});

document.getElementById('stop').addEventListener('click', () => {
  tween.pause();
});

document.getElementById('reverse').addEventListener('click', () => {
  tween.reverse();
});

document.getElementById('speedUp').addEventListener('click', () => {
  tween.timeScale(2);
});

document.getElementById('slowDown').addEventListener('click', () => {
  tween.timeScale(0.5);
});

document.getElementById('restart').addEventListener('click', () => {
  tween.restart();
});

document.getElementById('seek').addEventListener('click', () => {
  tween.seek(2);
});

document.getElementById('progress').addEventListener('click', () => {
  console.log(tween.progress());
});

document.getElementById('timeScale').addEventListener('click', () => {
  console.log(tween.timeScale());
});

document.getElementById('kill').addEventListener('click', () => {
  tween.kill();
});

透過 GSAP 所以提供的動畫操作方法，我們可以隨時決定當前動畫要做什麼，例如播放、暫停、反轉、加速、減速、重新開始、跳轉到特定秒數、取得當前動畫進度、取得當前動畫速度、殺死動畫等，因此非常的方便，在實際開發上來講也很常用唷。

那麼這一篇就先到這邊結束哩。