一些關於GSAP的基本屬性及應用

基本動畫屬性

• x: 100 // X 軸位移
• y: 50 // Y 軸位移
• rotation: 360 // 旋轉角度
• scale: 1.5 // 縮放
• opacity: 0.5 // 透明度
• backgroundColor: "#ff0000" // 背景顏色
• width: "100px" // 寬度
• height: "100px" // 高度

時間控制

• duration: 2 // 動畫持續時間（秒）
• delay: 1 // 延遲開始時間
• repeat: 2 // 重複次數 (-1 為無限重複)
• repeatDelay: 1 // 每次重複之間的延遲
• yoyo: true // 是否來回播放

緩動函數 (Easing)

• ease: "power1.inOut" // 內建緩動
• ease: "elastic.out(1, 0.3)" // 彈性動畫
• ease: "bounce.out" // 彈跳效果
• ease: "steps(12)" // 步進動畫

回調函數

• onStart: () => console.log("動畫開始")
• onUpdate: () => console.log("動畫更新中")
• onComplete: () => console.log("動畫完成")
• onRepeat: () => console.log("動畫重複")

隨機值與函數

• x: "random(-100, 100)" // 隨機值
• rotation: "random([0, 90, 180, 270])" // 隨機數組
• scale: () => Math.random() * 2 // 函數返回值

變形相關

• transformOrigin: "left center" // 變形原點
• skewX: 45 // X 軸傾斜
• skewY: 45 // Y 軸傾斜

特殊控制

• paused: true // 創建時暫停
• immediateRender: true // 立即渲染第一幀
• overwrite: "auto" // 覆蓋規則
• stagger: // 序列動畫
  • amount: 1 // 總時間
  • from: "start" // 起始位置
  • each: 0.1 // 每個元素的延遲

SVG 特定屬性

• fill: "#ff0000" // 填充顏色
• stroke: "#000000" // 描邊顏色
• strokeWidth: 2 // 描邊寬度
• drawSVG: "0% 100%" // SVG 繪製動畫

TextPlugin 屬性

• text（需要 TextPlugin）：
  • 作用：定義元素的文本內容。
  • 範例：text: 'Hello, World!' 表示將元素的文本內容設置為 'Hello, World!'。

---

實用範例

基礎動畫組合

gsap.to('.element', {
    duration: 1,
    x: 100,
    opacity: 0.5,
    scale: 1.2,
});

序列動畫

gsap.to(elements, {
    duration: 1,
    y: 100,
    opacity: 0,
    stagger: {
        each: 0.2,
        from: 'start',
    },
});

複雜動畫組合

gsap.to(element, {
    duration: 2,
    x: 200,
    rotation: 360,
    scale: 1.5,
    ease: 'elastic.out(1, 0.3)',
    yoyo: true,
    repeat: -1,
    repeatDelay: 1,
    onRepeat: () => console.log('重複播放'),
});

說明

1. 基本動畫屬性：列出了常用的動畫屬性，如位移、旋轉、縮放、透明度等。
2. 時間控制：介紹了控制動畫時間的屬性，如持續時間、延遲、重複次數等。
3. 緩動函數 (Easing)：列出了常用的緩動效果。
4. 回調函數：介紹了動畫過程中的回調函數，如開始、更新、完成、重複等。
5. 隨機值與函數：介紹了如何使用隨機值和函數來設置動畫屬性。
6. 變形相關：介紹了變形相關的屬性，如變形原點、傾斜等。
7. 特殊控制：介紹了特殊控制屬性，如暫停、立即渲染、覆蓋規則、序列動畫等。
8. SVG 特定屬性：列出了 SVG 動畫中特有的屬性。
9. TextPlugin 屬性：介紹了 TextPlugin 的使用方法。
10. 實用範例：提供了一些常見的動畫組合範例。