(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,這邊就不一一介紹了。

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

Liker 讚賞

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

Buy Me A Coffee Buy Me A Coffee

Google AD

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