昨天我們認識了 GSAP 的 Tween 概念，以及 x / y / z、rotation、duration、delay、ease 等基礎動畫參數，已經可以做出最基本的動畫效果。

不過，一般來說，要做出更豐富又炫炮的動畫，往往需要將多個 Tween 組合在一起，並控制它們彼此的播放順序與時間。這時，就需要用到 GSAP 的 Timeline（時間軸）。

Timeline 可以把多個 Tween 放在同一條時間軸上，再透過 Position Parameter 決定每段動畫要從什麼時間點開始。

Position Parameter 的寫法有很多種，除了可以直接指定時間，也能參考前面的動畫來安排相對位置；如果動畫變得比較複雜，還可以使用 Label 幫時間點取名字，讓整條 Timeline 更好安排與管理。

老樣子，我們可以搭配 demo 來理解參數所代表的意義~ 👉🏿 demo連結

Position Parameter

先準備五段動畫設定：

const MOVE = { x: distance, duration: 2 } //平移
const ROTATE = { rotation: 360, duration: 2 } //旋轉
const FLIP = { rotationY: 180, duration: 2 } //翻轉
const COLOR = { colors: "#c63d2f", duration: 2 } //變色
const SCALE = { scale: 1.5, duration: 2 } //縮放

依序加入 Timeline：

const tl = gsap
.timeline()
.to(".box", MOVE)
.to(".box", ROTATE, "1.5" )
.to(".box", FLIP, "<-1" )
.to(".box", COLOR, ">0.5" )
.to(".box", SCALE, "+=0.2" )

• 直接填入數字代表 Timeline 上的絕對時間點。例如 ROTATE 的 1.5，表示這個 Tween 固定從整條 Timeline 的第 1.5 秒開始，不受前一個 Tween 的結束時間影響。
• < 和 > 是以「最近加入 Timeline 的動畫」作為參考。< 代表該動畫的開始時間，> 代表該動畫的結束時間。例如 "<-1"，表示從前一動畫的起點往前 1 秒開始；">0.5"，則表示從前一動畫的結束時間往後 0.5 秒開始。
• += 和 -= 是以 Timeline 目前的結束時間作為參考。"+=0.2" 表示等 Timeline 目前所有動畫結束後，再延遲 0.2 秒開始；如果改成 "-=0.2"，則會從 Timeline 目前的結束時間往前 0.2 秒開始。

所以如果畫成時間軸就會長這樣:

Label

當 Timeline 中有越來越多Tween 組合，如果只靠 Position 定位，實際上的秒數可能就要變成數學考題了XD~ 這時候，我們就可以使用 Label 可以替時間點命名：

tl.addLabel("start", 0)
tl.addLabel("turn", "start+=0.6")

這段程式建立了兩個 Label：start 位於 Timeline 的第 0 秒，turn 則位於 start 之後 0.6 秒

const tl = gsap.timeline()
tl.addLabel("start", 0)
.to(".a", MOVE, "start")
.addLabel("turn", "start+=0.6")
.to(".b", ROTATE, "turn")
.to(".c", COLOR, "turn+=0.4")

.a 從 start 開始，.b 從 turn 開始，而 .c 則在 turn 後 0.4 秒開始。如此一來，我們不需要一直計算每個動畫實際位於第幾秒，只需要透過 Label 來安排各個動畫的時間位置即可。

小結

今天我們簡單示範了一些 Timeline 常用的功能，包括 Tween 的排列、Position、Label 等概念，這樣就能自由組合不同的動畫效果，更方便的去管理時間軸。
明天我們將會講解 Stagger ，排列出特定序列的動畫 ~~~