GSAP 動畫工具

Chingya

Published in

✨ 黑洞創造 BlackHole Creative ✨

10 min readJun 6, 2022

🚀 使用高效能且富有彈性的動畫函式庫，輕鬆製作網頁動畫

什麼是 GSAP？

GSAP 為 Green Sock Animation Platform 的簡稱，是一套專門處理動畫特效的 JS 套件。GSAP 本身套件的檔案容量小，且能適用於各種瀏覽器，可以從簡單的動畫效果延伸到各種複雜的特效呈現。

前端開發人員和設計人員能夠創建基於時間軸的強大動畫，使用上允許精準的控制動畫序列，而非運用 CSS 提供的keyframe和animation屬性。

GSAP 採用模組化與插件式的結構，保持了核心引擎的輕量，總共有四個核心 API，TweenLite、TimelinLite、TimelineMax、TweenMax，而 TweenMax 是所有 API 與 Plugin 的集合。

TweenLite
TweenMax
TimelineLite
TimelineMax

在2019年底，GSAP 升級到 GSAP3 後，不再區分 TweenLite、TimelineLite、TimelineMax、TweenMax，全部合並為 gsap 物件，並保持與舊版的兼容性。

📣 如果想要了解版本之間的差異可參考這篇官方文件： GSAP 3 Migration Guide

如何使用？

安裝 GSAP

可以選擇使用 CDN 或是 NPM 的方式安裝。

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>

npm install gsapimport gsap from "gsap";

安裝完成後，我們來看看如何使用動畫，先介紹三種補間動畫的基本使用方式：

創建補間動畫（Tween）的基本方式

gsap.to(target, vars)：物件從「預設狀態」到「指定狀態」
gsap.from(target, vars)：物件從「指定狀態」到「預設狀態」
gsap.fromTo(target, fromVars, toVars)：同時指定開始與結束的狀態

參數說明

target：使用動畫的元素
因為是使用 document.querySelectorAll()，因此所有符合的 CSS 選擇器都會套用動畫；另外，如有多元素對象，可使用陣列 [element1, element2]。
vars：設置效果及屬性狀態

舉例來說，先將我們的指定物件設置好後，將參數設定選轉角度以及 X 軸位置：

//HTML
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>//JS
gsap.to(".box1", { rotation: 27, x: 100, duration: 3 });
gsap.from(".box2", { rotation: 27, x: 100, duration: 3 });
gsap.fromTo(".box3", { rotation: 27, x: 100 }, { rotation: 0, y: 100, duration: 3 });

如果我們要讓動畫看起來是有先後順序的話，單純使用 Tween 需要建立多個補間動畫，再使用 delay 的方式延遲動畫，操作上會很複雜且不易調整。因此為了解決這個問題，可以使用 GSAP 的另一個功能 — Timeline。

時間軸（Timeline）

簡言之，就是利用時間軸的操控，調整動畫的時序，控制一連串的動畫步驟。

首先需要建立一個 Timeline，可以自訂變數來定義它。

const t1 = gsap.timeline();

接著，使用這個 Timeline，直接在每一個 Tween 的後面接上下一個動畫即可，GSAP 就會依照順序執行動畫。

t1.to(".box1", { duration: 1, x: 100 })
  .to(".box2", { duration: 1, y: 120 })
  .to(".box3", { duration: 1, x: 200 })
  .to(".box1", { duration: 1, rotation: 360 });

另外，若是有相同的動畫狀態時，可以設定預設值，預設值 defaults 可以套用到時間軸上的每一個 Tween，讓程式碼更加簡潔。

const t1 = gsap.timeline({
    defaults: {
      duration: 1,
  }});
t1.to(".box1", { x: 100 })
  .to(".box2", { y: 120 })
  .to(".box3", { x: 200 })
  .to(".box1", { rotation: 360 });

或者是想加入已經建立過的 Tween，則可以使用 add() 來加入動畫。

const tween = gsap.to(".box1", { rotation: 360 });
t1.to(".box1", { x: 100 })
  .to(".box2", { y: 120 })
  .to(".box3", { x: 200 })
  .add(tween);

`position` 參數

除此之外，Timeline 也提供了一個 position 參數，可用來控制動畫的插入點。

無設置：時間軸末尾
1：絕對時間，指定時間處
'+=1'、=1：相對時間，相對於時間軸的結尾
'someLabel'：指定標籤處（建立標籤使用 addLabel()）
‵someLabel+=1'、‵someLabel-=1'：相對於指定標籤
<：最近動畫的開頭
>：最近動畫的結尾
<1、<-1：相對於最近動畫的開頭
>1、>-1：相對於最近動畫的結尾

使用上，則是直接加到 vars 的屬性之後：

t1.to(".box1",1, { x: 100 }, 1.5) //插入至時間軸1.5秒處
  .to(".box2",1, { y: 120 }, "<0.75") //在最近一次動畫的開始後0.75秒插入
  .to(".box3",1, { x: 200 }, "+=0.3") //在時間軸結束後0.3秒鐘插入
  .to(".box1",1, { rotation: 360 });

控制動畫的撥放

除了單純的撥放動畫外，GSAP 也可以透過設定按鈕來操控動畫，這樣的功能可用來製作互動類型的網頁。

.play()：播放動畫
.pause()：暫停動畫播放
.reverse()：反轉播放動畫
.restart()：重新開始動畫
.seek()：不改變狀態下，跳至動畫某個時間點

依照上面的例子，我們先製作按鈕，並將按鈕加上事件處理，接著就可以透過按鈕來執行控制動畫的函式（動畫撥放、暫停、反轉、重新撥放）：

//HTML
<button id="play">paly</button>
<button id="pause">pause</button>
<button id="reverse">reverse</button>
<button id="restart">restart</button>//JS
const play = document.querySelector('#play');
const pause = document.querySelector('#pause');
const reverse = document.querySelector('#reverse');
const restart = document.querySelector('#restart');play.addEventListener('click', () => { t1.play(); });
pause.addEventListener('click', () => { t1.pause(); });
reverse.addEventListener('click', () => { t1.reverse(); });
restart.addEventListener('click', () => { t1.restart(); });

重複撥放

上面提到的動畫都是撥放一次，那若是我們需要重複撥放多次，或是無限次，則可以在 vars 用到以下參數：

repeat：動畫重複播放的次數，若需不斷重複撥放則設為 -1。
repeatDelay：可設定重複播放開始前，與上一段動畫的時間間距。
yoyo：為boolean值，設為true則會在下一次改由反方向播放動畫。

repeat: 10,        //設置動畫重複10次
repeatDelay: 0.5,  //設置重複間隔0.5秒
yoyo: true,        //設為true時，動畫會反轉重複

找靈感？找案例？

在 codepen 中有許多官方提供的案例，可依照需求快速的找到參考用程式碼，此外，官方所提供的 GSDevTools 套件可以免費在 codepen 使用，若是初學階段，有不確定的效果或是動畫時序，可以利用 codepen 來測試。

https://codepen.io/chrisgannon/pen/WNNJqXz

另外，官網上也有提供須多 Showcase，可以看到一些別人使用 GSAP 開發出來的網站，不僅單純使用動畫、結合 2D 繪圖套件或是 3D 繪圖套件，也有使用 GSAP 其他套件，如：Flip Plugin、ScrollTrigger、PixiPlugin 等等。

挑了幾個有趣的案例放上來，還有很多不同的案例，礙於篇幅會過長，有興趣的都可以點連結進去看看~

參考：

https://greensock.com/
https://chupai.github.io/posts/200229_gsap3/
https://hackmd.io/@zackgibson/B13JPdczu
https://jaywu-fe.medium.com/前端特效-gsap-教學-入門03-播放-f9d2ad9c580e
https://ithelp.ithome.com.tw/articles/10272580
https://blog.bitsrc.io/practical-guide-to-getting-started-with-gsap-greensock-animation-platform-21ff9638ea70