緩動函數小冊子
緩動函數 (Easing function) 嘅用途係順住時間控制一個數目嘅變化。
現實生活嘅嘢唔會忽然之間挑起或者停低，而且基本上冇可能以穩定速度郁動。 當我哋開櫃桶嘅時候，我哋會先快速地掹佢出嚟，再慢返落嚟，直至佢出晒嚟為止。 如果你跌低嘢嘅話，嗰樣嘢會首先慢慢往下加速，之後由地上彈返上嚟。
呢個網頁會幫你揀返啱嘅緩動函數。
開源
幫手將呢個網頁翻譯成你嘅語言
x
t
CSS
用 CSS 嘅時候，你可以用 transition 同埋 animation 元素嚟指定一個緩動函數。
.block { transition: transform 0.6s ; }
喺 cubic-bezier.com 編輯。
呢個函數可以用
@keyframes 造成：:大細
載入緊…
位置
載入緊…
透明度
載入緊…
PostCSS
用 PostCSS 整緩動函數就容易好多。 你可以用 postcss-easings 呢個插件嚟指定你想要嘅函數，佢會由呢個網頁抽出相關嘅資訊。
.block { transition: transform 0.6s ; }
呢個會被轉換成上面嘅 CSS 碼。
呢個函數唔好彩地冇可能用任何 PostCSS 插件嚟製造。 你須要用上面嘅
@keyframes 方法。漸變式
你可以用 postcss-easing-gradients 嚟畫漸變式。
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
公式
以下係呢個函數嘅 TypeScript 版。 裡面嘅變數 x 代表動畫嘅進度，由 0（動畫開始）至 1（動畫完結）。
function (x: number): number {
}以下係呢個函數嘅 TypeScript 版。 裡面嘅變數 x 代表動畫嘅進度，由 0（動畫開始）至 1（動畫完結）。
function (x: number): number {
}睇吓變化:
呢個函數:
呢個函數
線性函數:
線性函數