(10)前端好好玩用 GSAP 做一個特效 - 時間軸/線

前言

GSAP 還有另一種製作動畫的方式，前面我們都是屬於一個一個動畫，所以這一篇要來介紹時間軸/線的製作方式。

Timeline

GSAP 中有一個方法叫做 Timeline，中文就是時間軸或時間線。

那麼為什麼會需要 Timeline 呢？這邊先讓我們來看一下範例程式碼

gsap.to('#box1', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

gsap.to('#box2', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

gsap.to('#box3', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

我們可以看到 3 個方塊，他們的動畫都是一樣的，並且會同時移動。

如果你的需求是這樣子，那麼基本上是沒有什麼太大問題，但是假設你是期望這 3 個方塊的動畫是依序執行(意指 A 結束後才接著 B 以此類推)，那麼這時候就需要用到 Timeline 了。

那麼該怎麼用呢？其實非常簡單，只要宣告一個 gsap.timeline() 並將它指定給一個變數，然後將你的動畫加入這個變數中即可。

const tl = gsap.timeline();

tl.to('#box1', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

tl.to('#box2', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

tl.to('#box3', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

你會發現動畫的執行順序已經變成了 A -> B -> C，這就是 Timeline 的用途。

那麼你會發現相同的動畫屬性寫了三次，這樣的程式碼可讀性不高，所以我們可以將它改寫成這樣

const tl = gsap.timeline({
  defaults: {
    duration: 5,
    x: 500,
    repeat: -1,
    ease: 'bounce.out',
  },
});

tl.to('#box1', {});

tl.to('#box2', {});

tl.to('#box3', {});

發現了嗎？透過 defaults 參數，我們就可以將相同的屬性寫在一起，那麼這樣原本寫三次的程式碼，就只需要寫一次了，透過這種方式程式碼得可維護性就跟著升高。

那麼這一篇就先到這邊，我們下一篇見。