網頁前端特效動畫 GSAP 教學 [入門01][大綱]

如何快速使用gsap並了解gsap基本架構，介紹基本一次性動畫。

官方特色資訊

• 驚人的效能
• 強大的功能
• 相容性高

可能需要的背景知識

1. 基本 JavaScript 對 HTML DOM 的操作
2. 基本 JavaScript 程式運作順序
3. CSS transition

CDN 安裝

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

NPM 安裝

npm install gsap

GSAP須知物件概念

可以各別另名、操作的物件

gsap

主引擎的物件，可產生其他gsap物件

Tween

播放動畫的基本單位

Timeline

動畫容器，可新增、納入 Tween 播放單位或同為 Timeline 的容器

一次性動畫，簡潔有力

// gsap.to(選擇器, 動畫設定)
 
gsap.to(".block", { // 選擇器
    x: 300, // translateX簡稱
    duration: 1 // 時間
});

基本可以透過以下三個方法來促使選擇器的元素做動畫
三種方法本質上沒有區別，根據情境選擇適合的方法
使用後會回傳一個 Tween 物件

預設的狀態: 根據當下 css (或Attribute) 設定後的狀態值(getComputedStyle)
指定的狀態: 自己設定想讓物件變成的狀態值

• gsap.to 我想讓物件從 “預設的狀態” 到 “指定的狀態”
• gsap.from 我想讓物件從 “指定的狀態” 到 “預設的狀態”
• gsap.fromTo ”同時指定“ 開始與結束狀態

上面的例子來看三種方法的使用情境
目標動畫: translateX(0px) -> translateX(300px)

1. CSS 沒有設定 translateX，Atrribute也沒硬設，使用to
   gsap.to(".block", {x: 300})
從預設 -> 到設定
2. CSS 或 Atrribute 已經有 transform: translateX(300px) 了，使用from
   gsap.from(".block", {x: 0})
從預設 -> 到現況
3. 不管 css transform 的值是什麼(除了!important)，都可以使用fromTo
   gsap.fromTo(".block", {x: 0}, {x: 300})
從設定 -> 到設定

舉例使用情境

1: 已經有CSS：當你的圖片已經有常用置中 translate(-50%, -50%) 的情況下，在互動動畫中，該如何再加一個進場動畫，使它從右邊 100px 的位置進場呢?

使用 from，指定動畫的初始設定

gsap.from('該圖片DOM', {x: 100}) 
// gsap 會計算對映的px 去符合從一開始 -100px 到最終 -50%的距離換算

2: js 與 CSS 混亂: 有情況會是動畫歸動畫 js, 畫面切版歸 CSS ，比較好管理修改項目。

使用 fromTo，頭尾全包

gsap.fromTo(el, {x: -100}, {x: 100})

有多屬性需要同時變化

輸入特徵:

1. 可同時使多個屬性變化
2. 部分CSS都有簡化 (ex. 平行方向位移(translateX)可輸入x即可)
3. 表示法為駝峰式 (ex. backgroundColor)
4. 預設的省略單位非常貼近常用單位 (ex. px, deg)

除了省去預設單位(Number)以外的常用設定值

1. 可直接加單位的格式（String）

// ex. 我的x要用預設，但是y卻要用％數計算
gsap.to(el, {
  x: '100px',
  y: '10%',
//z: '100em'
})

2. 輸入差值，自動換算（String）

// ex.有預設的css了，想要在目前的設定值再加上動畫
// 有 '+=' 與 '-=' 兩種前綴
// css
#target {
  transfrom: translateX(100px) translateY(100%); 
  height: 100px;
} 

// js
// 相當於位移 (100px, 100px)
gsap.to('#target', {
  x: '+=100', // 直接輸入差值
  y: '-=100'  // 單位不同也可以
})
// 動畫最後屬性 => style="translate(200px, 0px)"

3. (困難)根據執行時的回傳值（function）

當你的動畫是連動其他函數(式)
可以考慮使用function回傳值
使用變數，參考第五章部分內容

注意:
回傳值為執行當下所計算的值
若repeat複數次，請參考repeatRefresh設定

const var = 123
function returnVar() {
  return 123
} 
gsap.to('#target', {
  x() { return 123 },
  y: function(){ return 456 },
  z:() => (new Date().getMilliseconds() + var),
  rotate: returnVar
})

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