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

前言

前一篇我們認識到了基礎的時間線觀念，但其實時間線有非常多功能，所以這一篇將會繼續介紹時間線。

時間線的基本

拉回到剛剛前面的範例

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

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

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

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

前一篇有介紹到 defaults 參數，這個參數很方便地讓我們可以初始化其他的時間軸動畫。

那麼時間軸還有什麼特別之處呢？其實 tl.to() 除了指定動畫目標、動畫效果外，其實還有第三個參數可以使用，而這個參數的概念叫做 position，這個參數可以讓我們指定動畫的時間軸位置，這邊讓我們來看一下範例。

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

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

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

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

基本上從這個範例來看，我們其實看不太出差異，因為與原有的範例相比，只是多了一個參數而已，但其實這個參數可以讓我們更精準地控制動畫的時間軸。

舉例來講，如果我們期望第三個動畫，也就是 #box3 與第一個動畫 #box1 開始時間相同的話，那麼就可以這樣寫

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

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

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

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

透過第三個參數我們可以很精準的決定時間軸上每個動畫的開始時間，而這個參數的值可以是數字或是字串，如果是數字的話，就是指定開始時間，如果是字串的話，就是指定時間軸上的標籤。

那麼第三個參數除了 start 還有哪些參數呢？以下我也列出常見的參數

• start：指定動畫開始時間為時間軸的開始時間
• end：指定動畫開始時間為時間軸的結束時間
• +=1：指定動畫開始時間為時間軸的開始時間 + 1 秒
• -1：指定動畫開始時間為時間軸的開始時間 - 1 秒
• +=0.5：指定動畫開始時間為時間軸的開始時間 + 0.5 秒
• +=0.25：指定動畫開始時間為時間軸的開始時間 + 0.25 秒
• <：指定動畫開始時間為時間軸上前一個動畫的結束時間
• >：指定動畫開始時間為時間軸上前一個動畫的開始時間

這些參數的意義，我們可以從下面的範例來看

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

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

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

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

tl.to('#box4', {}, '-=10');

tl.to('#box5', {}, '<');

tl.to('#box6', {}, '>');

到目前為止你應該對於時間軸有一定的概念了，接著我們就準備到下一篇吧。