請啟用 Javascript 查看內容

GSAP3 - 專門處理動畫與特效的 JS 套件

 ·  ☕ 6 分鐘

這週是 六角鼠年鐵人賽 第四週，之前沒碰過 TweenMax，但 GSAP 已經升級 GSAP3，就簡單研究一下 GSAP3。

GSAP3

GSAP 是 GreenSock Animation Platform 的簡稱，是一套專門處理動畫與特效的 JS 套件。

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

但 2019年底 GSAP 從 GSAP2 升級到 GSAP3，不再區分 TweenLite、TimelineLite、TimelineMax、TweenMax，全部合並為 gsap 物件。

GSAP3 的優點：

  • 檔案大小為 TweenMax 的一半，但新增了 50多個功能。
  • 全部合並為 gsap 物件，不用在區分 TweenLite 和 TimelineMax 物件。
  • 新版本相容舊版本寫法，所以可以沿用，新寫法提供更好的可讀性。

官網：

下載安裝

GSAP Installation

npm install gsap
// or
yarn add gsap

CDN

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js

版本差異

1. gsap 物件

原本須要用 Tweens（補間），就要使用 TweenLite/TweenMax 物件。要用到 Timelines（時間軸），就要使用 TimelineLite/TimelineMax 物件。

GSAP3 統一使用 gsap 物件。gsap 物件，具有各種方法和屬性，可用來創建 Tweens（補間）和 Timelines（時間軸）。

舊的 Tween 的創建方式：

1
2
3

TweenMax.method('selector', {});
// or
TweenLite.method('selector',{});

現在統一使用 gsap 物件：

1

gsap.method('selector', {});

舊的 Timeline 的創建方式：

1
2
3
4
5
6
7

const tl = new TimelineMax();

tl.method('selector', {});

// or
const tl = new TimelineLite();
tl.method('selector', {});

現在 Timeline 一樣也只需要使用 gsap 物件：

1
2
3

const tl = gsap.timeline();

tl.method('selector', {});

2. duration 參數

原來的寫法 duration 為方法的參數：

1

TweenMax.to('.box', 1, { x: 100 });

新寫法被整合到了 vars 物件中了：

1
2
3
4

gsap.to('.box', {
  duration: 1,
  x: 100,
});

擁有更佳的可讀性。

3. Timeline 預設值

原本的 Timeline 寫法：

1
2
3
4
5
6
7
8
9

const t = new TimelineMax();

t.to('.box1', 1, {
  x: 100,
  ease: 'elastic'
}).to('.box2', 1, {
  y: 100,
  ease: 'elastic'
});

使用新的寫法，如有有相同的參數，可以設定預設值：

1
2
3
4
5
6
7
8
9

const t = gsap.timeline({
  defaults: {
    duration: 1,
    ease: 'elastic'
  }
});

t.to('.box1', { x: 100 })
 .to('.box2', { y: 100 });

4. 交錯屬性

原本交錯動畫，要使用到額外的方法創建 Tween 實體，例如staggerTo()、staggerFrom()、staggerFromTo()：

1

TweenMax.staggerTo('.box', 1, {rotation:360, x:100}, 0.5);

現在只需要設置 stagger 屬性即可：

1
2
3
4
5
6

gsap.to('.box', {
  duration: 1,
  stagger: 0.5,
  rotation: 360,
  x: 100
});

5. 全新的亂數功能

1 ~ 400 之間：

1
2
3

gsap.to('.box', {
  x: 'random(100, 400)',
});

隨機選擇一個數字，可以使用陣列表示：

1
2
3

gsap.to('.box', {
  x: 'random([0，100，400，500])',
});

6. 全新的影格功能 Keyframes

大家一定都知道 CSS 動畫的 keyframes。那 GSAP 中的 keyframes 是什麼？

原本要建立一連串的動畫（例如，先移動，再下移，最後旋轉），需要為每個動作建立 Tween 或使用 Timeline。而 keyframes 可以在同一個 Tween 內完成。

1
2
3
4
5
6
7

gsap.to('.box', {
  keyframes: [
    { duration: 1, x: 100, },
    { duration: 1, y: 100 },
    { duration: 1, rotation: 360 },
  ]
});

7. 全新的 repeatRefresh

開啟 repeatRefresh: true，會在重複執行時（設定 repeat），紀錄當前狀態再執行，而不會回到初始狀態。

1
2
3
4
5
6

gsap.to('.box', {
  duration: 1,
  repeat: 5,
  repeatRefresh: true,
  x: 'random(100, 400)',
});

8. 全新的全域動畫

Global timeline 可以控制全部的動畫實體。

1
2
3
4

gsap.globalTimeline.timeScale(0.1); // 控制所有動畫的速率 0 ~ 1
gsap.globalTimeline.pause();        // 停止目前所有動畫
gsap.globalTimeline.play();         // 播放目前所有動畫
gsap.globalTimeline.paused();       // 回傳目前動畫狀態 true:暫停 / false:播放

9. 新的動畫輔助工具

Utility Methods

  • gsap.utils.checkPrefix()
  • gsap.utils.clamp()
  • gsap.utils.distribute()
  • gsap.utils.getUnit()
  • gsap.utils.interpolate()
  • gsap.utils.mapRange()
  • gsap.utils.normalize()
  • gsap.utils.pipe()
  • gsap.utils.random()
  • gsap.utils.snap()
  • gsap.utils.splitColor()
  • gsap.utils.toArray()
  • gsap.utils.unitize()
  • gsap.utils.wrap()
  • gsap.utils.wrapYoyo()

10. 相對動畫時間

原本會需要標籤來添加相對動畫時間：

1
2
3
4
5
6

gsap.timeline()
  .add('s')
  .to('.box1', { ... }, 's')
  .to('.box2', { ... }, 's')
  .to('.box3', { ... }, 's+=0.8')
  .to('.box4', { ... }, 's+=0.8');

GSAP3 新增了最近的動畫時間：

  • >：最近添加的動畫的開始時間
  • <：最近添加的動畫的結束時間
1
2
3
4
5

gsap.timeline()
  .to('.box1', { ... })
  .to('.box2', { ... }, '<')
  .to('.box3', { ... }, '<0.8')
  .to('.box4', { ... }, '<');

補間動畫 Tween

補間是 flash 時代的專業詞彙，意思是在起始狀態和終點狀態之間補全中間過程。

包含四個要素：

  • 動畫目標（target）
  • 起始狀態
  • 終點狀態
  • 補間效果

1. 創建 Tween

創建 Tween 的常用方法（所有這些方法都會回傳 Tween 實體）：

參數說明：

  • target：需要動畫的元素
    • target 使用 document.querySelectorAll()，所有符合的 CSS 選擇器都會是設置動畫的對象。
    • 如果有多個元素對象，則使用陣列 [element1, element2]
  • vars：設置補間效果及屬性狀態

Timeline

Timeline 就是「時間軸」，可以用來控制、管理一連串的動畫。

  • 控制多段動畫 / 序列動畫
  • 自由與重疊排序
  • 添加 Tag 掌握動畫片段

舉例來說，我們要對多個元素作一連串的動畫，需要建立多個 Tween 並用 delay 設置延遲時間，非常麻煩：

1
2
3

gsap.to('.box1', { duration: 1, x: 100, });
gsap.to('.box2', { delay: 1, duration: 1, y: 100 });
gsap.to('.box1', { delay: 2, duration: 1, rotation: 360 });

而且還無法對這一連串的動畫做控制。點我看範例。

這時候可以使用 Timeline，建立一個時間軸，來管理這些動畫。

1
2
3
4
5

const t1 = gsap.timeline();

t1.to('.box1', { duration: 1, x: 100, })
  .to('.box2', { duration: 1, y: 100 })
  .to('.box1', { duration: 1, rotation: 360 });

點我看範例。

如果有相同動畫狀態，可以設定預設值，使程式碼更簡潔：

1
2
3
4
5
6
7
8
9

const t1 = gsap.timeline({
  defaults: {
    duration: 1,
  },
});

t1.to('.box1', { x: 100, })
  .to('.box2', { y: 100, })
  .to('.box1', { rotation: 360, });

1. 在時間軸中放置動畫

在時間軸建立動畫：

  • to()
  • from
  • fromTo
  • set()
1
2
3

const tl = gsap.timeline();

tl.to(element, {duration: 1, x: 100, opacity: 0.5});

Timeline 可以鏈式呼叫：

1
2
3
4

const tl = gsap.timeline();

tl.from(element, {duration: 1, x: -100})
  .to(element, {duration: 1, y: 50});

在時間軸中，加入一段已建立的動畫，使用 add()：

1
2
3
4

const tween = tween = gsap.to(element, {duration: 1, x: 100, opacity: 0.5});

const tl = gsap.timeline();
tl.add(tween);

Timeline 許多方法都多 position 參數，可用來控制動畫插入點：

  • 無設置：時間軸末尾
  • 1：絕對時間，指定時間處
  • '+=1'、-=1：相對時間，相對於時間軸的結尾
  • 'someLabel'：指定標籤處（建立標籤使用 addLabel()）
  • ‵someLabel+=1'、‵someLabel-=1'：相對於指定標籤
  • <：最近動畫的開頭
  • >：最近動畫的結尾
  • <1、<-1：相對於最近動畫的開頭
  • >1、>-1：相對於最近動畫的結尾
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 插入至時間軸末尾
tl.to(element, 1, {});  

// 插入至時間軸2秒處
tl.to(element, 1, {}, 2);

// 在時間軸結束後2秒鐘插入
tl.to(element, 1, {}, '+=2');
// 在時間軸結束前2秒鐘插入
tl.to(element, 1, {}, '-=2');

// 在3秒處建立spin標籤
t1.addLabel('spin', 3);
// 在spin標籤處插入動畫
tl.to(element, 1, {}, 'spin');
// 在spin標籤處前三秒入動畫
tl.to(element, 1, {}, 'spin+=3');

// 在最近一次動畫的開頭插入
tl.to(element, {x: 100}, '<');

// 在最近一次動畫的開始後1秒插入
tl.to(element, {x: 100}, '<1');

基本用法

1. 數字動畫 0~100

最基本的用法，對物件的屬性去做變化。

2. CSS 動畫

3. 動畫控制

  • .play()：播放動畫
  • .pause()：暫停動畫播放
  • .paused()：獲取或設置動畫暫停狀態
    • myAnimation.paused(!myAnimation.paused()) 暫停動畫切換
  • .resume()：繼續動畫播放
  • .restart()：重新開始動畫
  • .reverse()：反轉播放動畫
  • .reversed()：獲取或設置動畫反轉狀態
    • myAnimation.reversed( !myAnimation.reversed() ) 動畫撥放方向切換。
  • .seek()：不改變狀態下，跳至動畫某個時間點

4. 重複撥放、來回撥放

1
2
3

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

5. 錯開動畫

1

stagger: 0.5,  // 設置錯開時間

6. 週期

GSAP2 的 cycle 屬性，被 GSAP3 的 gsap.utils.wrap() 給取代，而且更加靈活。

簡易應用

Mousemove Event

1. Image Trail Effects

2. Slinky Text

Image Block Reveal

Text Animation

SplitText 商業插件

1. 重組文字

竹白
作者
竹白
前端筆記
文章目錄