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

前言

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

動畫控制

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

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

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

這邊就讓我們看一下範例

<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>

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

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

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

前言

動畫控制

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

動畫控制

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

(17)前端好好玩用 GSAP 做一個特效 - ScrollTrigger

(16)前端好好玩用 GSAP 做一個特效 - 註冊 Plugins

(15)前端好好玩用 GSAP 做一個特效 - Plugins

(14)前端好好玩用 GSAP 做一個特效 - 跑馬燈

分享這篇文章

留言