---
tags: 套件與知識
---
# Green Sock - GSAP 動畫

[個人示範codePen](https://codepen.io/firebro42/pen/QWJWQPM)

## 介紹
### [GSAP官網](https://greensock.com/docs/)
GSAP（GreenSock Animation Platform）是一個強大的 JavaScript 動畫庫，用於創建高效、流暢且交互性豐富的動畫效果。它具有廣泛的功能和優勢，使開發人員能夠輕鬆地創建各種吸引人的動畫效果。

### GSAP 的主要特點和功能：
* 優異的效能：GSAP 使用了高度優化的動畫引擎，可以在各種設備和瀏覽器上實現順暢的動畫效果。它通常比傳統的 CSS Animation 提供更好的效能，特別是在處理較複雜或大量的動畫時。
* 豐富的動畫特效：GSAP 提供了豐富的動畫特效和效果，包括位移、縮放、旋轉、透明度、顏色變換等等。開發人員可以輕鬆地應用這些特效來創建各種視覺上引人注目的動畫效果。
* 強大的時間軸控制：GSAP 的時間軸（Timeline）功能允許開發人員將多個動畫序列組合在一起，實現更精細的控制和協調。開發人員可以輕鬆地編排動畫的開始時間、持續時間、延遲和順序，以實現複雜的動畫場景。
* 交互性和事件支持：GSAP 支持動畫與用戶交互的集成，開發人員可以根據用戶的操作觸發、控制和修改動畫效果。它還提供了對滾動事件、鼠標事件、觸摸事件等的支持，使動畫能夠與用戶的操作實時互動。
* 彈性和可擴展性：GSAP 提供了靈活的 API 接口和可配置的參數，使開發人員能夠根據項目的需求進行定制和擴展。它也支持插件系統，開發人員可以輕鬆地擴展 GSAP 的功能，並集成其他庫或工具。
---

# GSAP 基礎：
## [CDN](https://greensock.com/docs/v3/Installation?checked=core#CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>

## GSAP起手式

動畫架構( "選取元素 like .red #id ", { 動態效果(即狀態) 以及 動畫進行時間duration } , 關鍵影格貞數)

動畫架構有以下三種:
1. gsap.to() :
定義結束狀態，即動畫結束後的位置狀態
2. gsap.fromto():
定義起始狀態與結束狀態
3. gsap.from():
定義起始動畫狀態，即一開始定義的狀態，動畫過度回原始模樣

// 定義最終狀態
gsap.to(".red", {
  rotation: 360,
  x: 100,
  duration: 1,
  repeat: -1,
  yoyo:true,
});

// 從起始狀態，到最終狀態
gsap.fromTo(
  ".blue",
  { opacity: 0, rotation: 50 },
  { opacity: 0.5, rotation: 0, duration: 1, repeat: -1 }
);

// 定義起始狀態
gsap.from(
  ".blue",
  { opacity: 0.1, x: 250, duration: 3, repeat: 0 }
);

## 宣告動畫變數與相關方法
可將動畫架構賦予到變數上，並藉此使用相關方法，來操作動畫
### 宣告動畫為變數

//定義動畫變數，並可以藉此使用一些操作方法
let myTween = gsap.fromTo(".yellow", { x: 0 }, { x: 200, duration: 3 });

### 相關方法
可以將這些方法綁定到事件上，藉此來操作動畫，例如: click ...之類

* .play()
指定播放按鈕
* .pause()
指定暫停按鈕
* .resume()
暫停處接續播放
* .restart()
重新開始動畫
* .kill()
暫停並移除動畫
* .seek(關鍵時間貞數)
動畫移至指定時間段
* .delay(時間)
延遲動畫時間

[其餘相關方法](https://greensock.com/docs/v3/GSAP/Tween)

//指定播放按鈕
$("#play").click(function () {
  myTween.play();
});
//指定暫停按鈕
$("#pause").click(function () {
  myTween.pause();
});
//暫停處開始播放
$("#resume").click(function () {
  myTween.pause();
});
//重新開始
$("#resume").click(function () {
  myTween.pause();
});
//讓動畫暫停並移除動畫，無法再利用play()函式繼續撥放，除非重新賦予動畫
$("#kill").click(function () {
  myTween.kill();
});
//讓動畫移至指定時間段，此處示範是回到 0秒處
$("#seek").click(function () {
  myTween.seek(0);
});
//延遲動畫
myTween.delay(2)

## 時間軸

宣告變數為時間軸，並可以將動畫都賦予在同一條時間軸上，來操作動畫
亦可透過設置不同的時間軸，各自操作動畫，便於管理與設計動畫

官方圖示:

// 設置時間軸，可以讓想要的動畫跑在同一條時間軸
let myTimeLine = gsap.timeline({repeat:-1,repeatDelay:1});
myTimeLine.to(".purple", {backgroundColor:'red',x:300, duration: 1},2);

### 時間軸標籤
* .addLabel( "定義名稱" , 關鍵秒數影格 )
透過定義指定時間軸的標籤，來讓動畫在特定時間作動

// 設置時間軸標籤，定義關鍵影格
myTimeLine.addLabel("myLabelOne", 3);
myTimeLine.to(".pink", {rotate:360,x:350, duration: 1},"myLabelOne");

### 關鍵秒數影格操作
動畫有時候會希望在某動畫結束時才播放，或者在動畫結束前幾秒才播放
可以透過對關鍵影格的操作來操作或計算。
* ">"
即代表上一個動畫結束時的關鍵秒數影格
* "<"
即代表上一個動畫開始時的關鍵秒數影格

* ">+=2"
即代表在結束的關鍵秒數影格後的兩秒

[其他相關操作](https://greensock.com/docs/v3/GSAP/Timeline)

// ">" 上一個動畫的結束的秒數(貞數)，"<" 上一個動畫的開始的秒數(貞數)，>+=2 => 結束後的兩秒開始動畫的意思
myTimeLine.to(".orange", {rotate:360,x:350, duration: 1},">2");