GSAP 教學： Tween - Lynk is Here

在 GSAP 中，可以將 Tween 視為一個 css 屬性設定器，我們可以在指定元素上，賦予起始屬性或終止屬性，隨後 GSAP 就會幫我們把動畫產生出來。

創建 GSAP Tween

可以用來創建 Tween 的方法如下 (他們的返回值都是 Tween)

gsap.to() 指定終止屬性
gsap.from() 指定起始屬性
gsap.fromTo() 指定起始與終止屬性

透過這些方法，我們就可以開始做一些動畫

gsap.to('.box', { rotation: 360, duration: 5 });

我們使用了 gsap.to()，代表我們希望指定動畫終止時的屬性，如同在一開始說的，我們傳入了要操作的元素 .box，以及我們希望的最終屬性 { rotation: 360, duration: 5 }，也就是我們希望 .box 元素，在 5 秒內旋轉一圈

GSAP Tween 的參數

CSS 選擇器

透過傳入 css 選擇器來去找到我們操作的元素

動畫配置

也就是範例裡的 { rotation: 360, duration: 5 }，可以使用

css 樣式
- 大部分的 css 樣式都是直接用小駝峰的形式(ex: backgroundColor)，使用在此參數的物件內
- transfrom 相關的樣式會有一些比較簡單的寫法，如: translateX 可以直接用 x，translateY 可以直接用 y
- 如果要做淡入淡出的動畫，可以使用 gsap 提供的 autoAlpha 屬性，可以避免掉直接使用 opacity 與 visibility 產生的動畫缺陷
動畫相關設定 (以下舉例幾個常用到的設定)
- duration 動畫時間長度 (單位為秒)
- delay 動畫延遲時間長度 (單位為秒)
- ease 動畫的 timing function，GSAP 另外提供了許多種參數，可參考 Ease Visualizer
- paused 動畫暫停 (動畫將不會自動撥放)
- repeat 動畫重複次數，-1 代表無限多次
- yoyo 動畫重複時，會再由結束屬性回到起始屬性
事件回調函數
- onStart 開始時調用
- onRepeat 重播時調用
- onComplete 結束時調用

操作 GSAP Tween

我們除了直接使 Tween 的動畫撥放，也可以像是影片那樣來操作動畫

// gsap.to() 會返回一個 Tween 的實例，透過這個實例就可以做各種操作
// 先透過 paused: true 不自動撥放 tween
const tween = gsap.to('.box', { rotation: 360, duration: 5, paused: true });

// 將 tween 的時間移動到 2 秒
tween.seek(2);
// 播放 tween
tween.play();