(9)前端好好玩用 GSAP 做一個特效 - Eases

前言

前面我們有介紹到 duration 屬性，而其實我們還可以針對 duration 屬性做一些進階調整，而這個屬性就是 ease。

Eases

ease 是一個可以改變動畫速度的屬性，什麼意思呢？其實就是改變 duration 屬性執行過程。

舉例來講當你將 duration 設定為 1 秒，而 ease 設定為 Power1.easeOut，那麼當你執行動畫時，動畫的速度會從 0 開始，然後在 1 秒內慢慢加速，直到 1 秒後停止，這邊我也示範一個範例，但是為了有感覺一點，所以我稍微調整一下 duration 的時間。

1
2
3
4
5
6

gsap.to('.box', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'Power1.easeOut',
});

1
2
3
4
5

gsap.to('.box', {
  duration: 5,
  x: 500,
  repeat: -1,
});

Power1.easeOut 這個動畫速率稍微有點難看出來，所以這邊我改成 bounce.out，這樣就可以看出來了

1
2
3
4
5
6

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

那麼 ease 有哪些屬性呢？這邊你可以看 GSAP 官方網站的 Eases，這邊就不一一介紹了。

這一篇也先到這邊結束囉。