網頁前端特效動畫 GSAP 教學[入門03][播放]
不知道為什麼第三篇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 的不同來判定要使用哪個
- 當沒任何參數時: 為查詢 (Getter)
ex. progress() -> 回傳現在進度% - 當少了主要參數時: 回傳客製 function
ex. clamper = gsap.utils.clamp(0, 100); // 客製Function
clamper(x) // 等同於 gsap.utils.clamp(0, 100, x) - 當一般使用時: 為執行動作(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 建議最少具備：
- 知道怎麼使用GSAP套件做出基本或複雜的動畫
- 知道怎麼處理互動事件及適當時機觸發 function
方法：
1. 建立一條動畫時間線(Timeline)
2. 新增對應的狀態動畫，針對不同狀況播放對應的動畫
3. 新增暫停，控管與觸發gsap事件。
好處：
- 工程師好管裡和閱讀，方便交接更改與延展
- 不會有設定重複狀態(Class)，動畫跳針的問題
- 動畫引擎重現的穩定性
