網頁前端特效動畫 GSAP 教學[入門03][播放]

如何控制gsap物件，配合事件控制

不知道為什麼第三篇SEO會最上面
有興趣的話可以先基礎介紹
前端特效動畫 GSAP 教學 [入門01][大綱]
前端特效動畫 GSAP 教學[入門02] [流程]

GSAP 動畫物件的觸發與使用

熟悉操作基本流程與動畫
認識基本常用方法
專案中，在適當的時機觸發動畫

播放單位的選擇

(前兩章內容)
Tween 處理簡單動畫
Timeline 串接、播放複雜動畫

Tween & Timeline 都可以當作播放單位的載體，播放功能也大同小異

可分為：
1. 短動畫的觸發(ex. 單一進出場, 事件觸發…)
2. 長動畫的控制(ex. 依序進出場, 背景動畫…)

Tween：根據每個動畫需求建立，同時控管/觸發
Timeline：建立一個主要時間軸去產出 Tween

GSAP 的 建立即播放 or 建立即暫停

預設：在創立Tween時會馬上播放一次

在GSAP文件中，提供一個 “是否一開始暫停” 的選項 paused (false)

// Animation (tween)
// 當我們改成 true, tween會呈現停止狀態
var Animation = gsap.to({
    paused: true,
    x: '+=100'
})

// 新增對應的時機去觸發
target.addEventListener('click', Animation.play);

自訂播放的時機點，以便達到特定的需求

GSAP 更多常用的控制播放功能

var control = gsap.to(...)
control.play(0); // 從 0 秒播放，沒有輸入數字則當下播放
control.pause(0); // 到 0 秒且暫，沒有輸入數字則當下暫停
control.restart() // 從新播放
control.reverse() // 反方向播放，同play

//整體進度條，沒有輸入數字則回傳當下進度
control.progress(percent) // 動畫進度到 0 ~ 1

(看如何綁事件與處理function)

GSAP 進階討論：設計好記的 function

上面內容可以發現：gsap大部分查詢(Getter)或動作(Setter) function
利用 Parameter 的不同來判定要使用哪個

1. 當沒任何參數時: 為查詢 (Getter)
   ex. progress() -> 回傳現在進度%
2. 當少了主要參數時: 回傳客製 function
   ex. clamper = gsap.utils.clamp(0, 100); // 客製Function
   clamper(x) // 等同於 gsap.utils.clamp(0, 100, x)
3. 當一般使用時: 為執行動作(Setter)。
   ex. progress(x) -> 直接將進度設定到x

參考官方更多有用的方法
ex. mapRange(inMin, inMax, outMin, outMax, valueToMap) -> value
ex. mapRange(inMin, inMax, outMin, outMax) -> Custom function

GSAP進階討論：適當播放互動動畫

當你有些互動動畫想在網站上呈現
基礎網頁課程學會了一些 class 狀態(modifier)來輔助做動畫
大部分修改 CSS 就足以應付需求了
但往往你需要的更多…

Coding Js 建議最少具備：

1. 知道怎麼使用GSAP套件做出基本或複雜的動畫
2. 知道怎麼處理互動事件及適當時機觸發 function

方法：

1. 建立一條動畫時間線(Timeline)
2. 新增對應的狀態動畫，針對不同狀況播放對應的動畫
3. 新增暫停，控管與觸發gsap事件。

好處：

1. 工程師好管裡和閱讀，方便交接更改與延展
2. 不會有設定重複狀態(Class)，動畫跳針的問題
3. 動畫引擎重現的穩定性

要注意:
新增多層動畫時，最好下對應的標籤
對動畫做有意義的註解或標記

前端特效動畫 GSAP 教學 [入門01][大綱]
前端特效動畫 GSAP 教學[入門02] [流程]
前端特效動畫 GSAP 教學[入門03][播放]
前端特效動畫 GSAP 教學 [入門04][ease]
前端特效動畫 GSAP 教學[入門05][交錯]