網頁前端特效動畫 GSAP 教學 [入門04][ease]

速度曲線，攸關動畫是否順暢，使人第一眼就留下。看似困難的效果，竟然只是ease變化。

5 min readMar 14, 2021

ease:
動畫進度速度、進度與時間的關係、像 CSS timing-function。
可直接加入 Tween 或 Timeline 屬性內的各種 ease function

透過前幾章的介紹，已經很熟悉基本操作的話，可以直接參考官方文

gsap.to('#target', {
  ease: 'power1.in',
  x: 100
})power: 基本各種強度的 ease-in ease-out
back: 會往前(後)超出預設值
elastic: 橡皮筋前後回彈
bounce: 彈跳球單向回彈
rough: 粗糙雜訊
slow: 展示slow motion
steps: 階段逐格
circ: 二次曲線成長
expo: 子數成長
sine: 三角函數

常見方法與問題

預設 ease: ’power1.out’ (不是CSS的Linear)
對剛入門的使用者很友善
讓所有動畫都有基礎的Ease
實作上可能會遇到一些比較深的問題

1. timing function 時間軸難校正

動畫的一半，不是時間軸的一半

gsap.to('.box', {
  ease: 'power2.out',
  x: 100
})

圖中為 power2.out 數值與進度的關係圖，可以發現：
當進度 20% 的時候，實際數值已經到 50%

ex.
時間 10秒的動畫，使 x 加 100px
在 2秒末時(20%)，就已經到 50px了（相當於總程的 50%）
在製作一些不能出框的動畫時，可能會很困擾

2. 線性變化(linear)

gsap.to('.box', {
  ease: 'none',
  x: 100
})

使用 ease: none 就可以使動畫等速，比較好掌握時間，但動畫相對單調
跟CSS預設值一樣，單純改變狀態。

— — — — — — — — — — — — — — 以下水深提醒 — — — — — — — — — — — —

進階使用

靠Ease畫出圓的移動軌跡

gsap可以複寫同一個對象
使 x, y 移動量相同、起步時間相同、使用相反的 sine.in / sine.out2
當然也可以自製 ease sin 跟 cos 比較好閱讀

// 更新 X 軸
gsap.to(
  ".block",
  {
   duration: 3,
   x: 200,
   ease: "sine.out"
  }
);

// 更新 Y 軸
gsap.to(
  ".block",
  {
   duration: 3,
   y: 200,
   ease: "sine.in"
  }
);

可以用轉的不轉，硬是要用Ease畫圈

估算動畫時間當 After Effects 使用

官方Ease: https://greensock.com/docs/v3/Eases

官方的圖表有基本的格線
可以稍加利用格線所對應比例
算出動畫的總長或出發點

ex: 以 circ.out 為例，在座標圖形中通過 (0.4, 0.8)
progress: 0.4 (40%) 時，為 value: 0.8 (80%)
若參數為：{ duration: 2.5, y: -500 }
可知在 1秒時，位置在 -400

即可接應其他動畫的斷點，在一秒後做一些接應動畫

差撞意外

Ease Function

ease 屬性可以接受傳入 function
(更多內容可查詢 gsap Function-based values)
一般傳入 String 會去取得已建立的函示庫 (如何建立)

function參數(argument): [當前] 時間百分比 (0~1)
return: [當前] 進度百分比 (預期: 0 ~ 1)

// ex.
gsap.to('#target', {
  ease: function(t){return t} // ease: 'none'
})// sin
gsap.to('#circle', {
  ease: function(t){return Math.sin(t * Math.PI / 2)}
})// cos
gsap.to('#circle', {
  ease: function(t){return Math.cos(t * Math.PI / 2)}
})

擴充 Ease Function 推薦 https://easings.net/常用

查看其他文章:

前端特效動畫 GSAP 教學 [入門01][大綱]
前端特效動畫 GSAP 教學[入門02] [流程]
前端特效動畫 GSAP 教學[入門03][播放]
前端特效動畫 GSAP 教學 [入門04][ease]
前端特效動畫 GSAP 教學[入門05][交錯]