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

發表於 2022-12-16 分類於 GSAP

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

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

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

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

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

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

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

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

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