沒有設定 ease 屬性的動畫,動態平均
1 2 3 4 5 | gsap.to('.box', { duration: 5, x: 500, repeat: -1, }); |
與上方的 ease: 'Power1.easeOut' 比較,在沒有設定 ease 屬性的動畫,移動的動態就都很平均。
加入 ease 屬性,快慢的動態感較直接
ease 屬性,主要是針對 duration 屬性 (動畫持續時間) 來設定,用來在動畫時間內對動態有著不同速度的呈現。
Power1.easeOut
ease 設定 Power1.easeOut,在 duration 1 秒的時間內,動態會由在 1 秒間慢慢加速,到 1 秒停止。
1 2 3 4 5 6 | gsap.to('.box', { duration: 5, x: 500, repeat: -1, ease: 'Power1.easeOut', }); |
bounce.out
ease: 'bounce.out' 的快慢動態就更強烈了。
1 2 3 4 5 6 | gsap.to('.box', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); |
資料來源: