GSAP 動畫工具
🚀 使用高效能且富有彈性的動畫函式庫,輕鬆製作網頁動畫
什麼是 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 的方式安裝。
- CDN
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
- NPM
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 來測試。
另外,官網上也有提供須多 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