再談CSS動畫說點不知道的（一）貝塞爾曲線

今天重新翻看《css 揭秘》「過渡與動畫」一章，並把該章**重新敲了一遍，**託管在我的github，在此總結一些心得。

在網頁中新增動畫的目的是讓使用者有更加優質的使用者體驗，為了達到目標，我們需要讓動畫滿足兩點目標：

其中，意料之外是指動畫要讓使用者感到新奇有趣，最好是產生驚喜（這歸功於好的設計靈感），而情理之中是指動畫要符合使用者的直覺，具體來說，就是動畫需要符合使用者對物理世界物體運動規律的心智模型，這需要web開發者來實現。

如何做到呢？終於進入正題了，答案是通過以下兩點：

回彈效果：物體運動不會突然終止，會因為慣性而繼續向前運動一段距離；

緩動曲線（又名貝塞爾曲線）：指定動畫在整段時間中以怎樣的速率推進；

**庫中的「彈跳動畫」demo說明了如何通過以上兩點建立逼真的小球掉落動畫。

對於回彈效果是我們在做動畫時需要想到的一點，而使用緩動曲線可以讓我們很好的實現回彈效果，在css中，設定緩動曲線的方式如下：

animation-timing-function: cubic-bezier(.87, .11, 1, .81);

這裡講解一下animation-timing-function屬性，用來指定動畫的運動速率，有一下幾個值：ease(default)，ease-in，ease-out，ease-in-out和上面提到的自定義函式。

你一定還是不明白緩動曲線是什麼，別急，看下面這張圖：

這基本上是animation-timing-function: ease的貝塞爾曲線圖，它的橫座標為時間，縱座標是程序，從圖中我們可以得出這樣的結論：「如果動畫整個持續時間為2秒，那麼在動畫開始1秒（一半時間）時，整個動畫已經完成了80%」。

停下，閉上眼，深呼吸，想想看在這種曲線下我們的動畫會經歷怎樣的過程，答案是它一開始會非常快，然後逐漸慢下來。

有點感覺了嗎？（如果沒有的話請多對照著上圖圖，腦子裡想象小球掉落的畫面。）

看到這裡，我已經預設你已經明白設定緩動曲線對於做出逼真動畫的意義了，那麼接下來的問題便是如何做到，畢竟cubic-bezier函式看起來一點都不好設定。

放輕鬆，拿上我給你的這個輪子，在貝塞爾函式的海洋中興風作浪吧：cubic-bezier。

如果你像我一樣不滿足上面的內容，那就跟我一起討論一下cubic-beizer這個函式裡的四個值分別是什麼？我們回到剛才那張圖：

注意，我為這張圖新增了座標單位，無論橫軸還是縱軸，原點的值都是0，而終點的座標值都是1，順便一提，這個貝塞爾曲線轉換為css屬性為：

transition-timing-function: cubic-bezier(.21, .07, .41, 1)

發現了嗎，前兩個引數值分別是起始錨點的橫，縱座標，後兩個引數分別是終止錨點的橫，縱座標。什麼？你問我錨點是什麼，這個就說來話長了，而且我認為沒有什麼說明的意義，反正你知道了還是要用我給你的工具生成這四個座標的。

但是，注意，我可以這樣設定乙個貝塞爾曲線：

transition-timing-function: cubic-bezier(.76, -0.68, .68, 1.56)

這個設定對應的貝塞爾曲線圖如下：

看到了嗎，貝塞爾曲線的一部分突破了座標系，我們的函式引數值也出現了負值與大於1的值，這又會發生什麼？

答案是動畫會在超出座標系的範圍裡繼續運動相應的量，如果你希望小球最終掉落至300px，那麼在曲線超出縱軸的範圍內，小球掉落的距離要大於300px（具體取決於偏離縱軸的程度）。

知道這個有什麼用呢？答案是知道這個原理可以幫助我們節省一些回彈動畫，通過這個原理，我們可以在貝塞爾曲線函式層面上實現簡單的「回彈效果」，具體可以參考**倉庫中「彈性過渡」demo。

再談CSS動畫 說點不知道的（一）貝塞爾曲線