30天挑戰：「漢堡按鈕動畫與cubic-bezier()」 相關筆記

總結

僅透過transition與cubic-bezier()製作出漢堡選單在開闔之間的圖示動畫

筆記

cubic-bezier()

W3S

• A transition effect with variable speed from start to end.
• 可設定 transition 效果在不同階段的速度

MDN

• The <easing-function> denotes a mathematical function that describes the rate at which a numerical value changes.
• 描述數值變換的速度
• The easing functions in the cubic-bezier subset of easing functions are often called “smooth” easing functions, because they can be used to smooth down the start and end of the interpolation.
• The calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. This causes the value to go farther than the final state, and then return. In animations, for some properties, such as left or right, this creates a kind of “bouncing” effect.
• 參考以下 gif，在cubic-bezier(x1, y1, x2, y2)的y2大於 1 的時候，移動範圍會先超出終點再回彈
• y1小於 0 而y2大於 1 的情況下，即可在動畫開始與結束時都表現出彈性效果
• x1 and x2 must be in the range [0, 1] or the value is invalid.

實作

See the Pen hamburger cubic-bezier by Charlie (@Charlie7779) on CodePen.

• 漢堡線的cubic-bezier()數值設定為cubic-bezier(0.175, 0.885, 0.32, 1.285)，代表起步速度大，收尾前先超出終點、後回彈
• 點選範例可觀察到漢堡線在 transition 結束前，都會先略為超出原始範圍、再返回，製作出彈性效果

參考文件

• W3Schools: CSS cubic-bezier() Function
• MDN: easing-function
• YouTube: Cubic Bezier Curves
• cubic-bezier() 數值模擬器