騰訊超全干貨！如何讓你的動(dòng)畫(huà)更自然？

大熊：本文將從為什么要探究更自然的動(dòng)畫(huà)、如何探究運(yùn)動(dòng)曲線方程、列舉常用的運(yùn)動(dòng)曲線、分別使用js和css實(shí)現(xiàn)曲線動(dòng)畫(huà)效果、可視化實(shí)現(xiàn)工具這幾個(gè)方面進(jìn)行介紹。希望閱讀后，本文能給你在制作動(dòng)畫(huà)效果時(shí)帶來(lái)一點(diǎn)幫助。

1. 為什么需要探究更自然的動(dòng)畫(huà)

自css animation推出后，強(qiáng)大的功能使得我們通過(guò)css也能制作出媲美flash的動(dòng)畫(huà)效果。然而在制作動(dòng)畫(huà)的時(shí)候，我們也許會(huì)常常糾結(jié)怎么設(shè)置timing-function。一般情況下，我們會(huì)直接使用自帶的五個(gè)動(dòng)畫(huà)函數(shù)（linear、ease、ease-in、ease-out、ease-in-out），或是在cubic-bezier.com創(chuàng)建一些自定義的動(dòng)畫(huà)函數(shù)(cubic-bezier(n,n,n,n))。但往往這一切都只是局限于使用，而不知道其原理究竟是什么，以及沒(méi)有背后的物理原理支撐，使得做出來(lái)的動(dòng)畫(huà)可能會(huì)變得有點(diǎn)形而上學(xué)。例如用ease-in來(lái)做小球從高處掉下的效果，這個(gè)加速效果沒(méi)有遵循相關(guān)物理原理，使得出來(lái)的動(dòng)畫(huà)效果不太自然。

自然的動(dòng)畫(huà)效果應(yīng)該是和我們?cè)诂F(xiàn)實(shí)生活中看到的物體運(yùn)動(dòng)軌跡相似的。這樣的效果往往與背后的運(yùn)動(dòng)曲線函數(shù)緊密聯(lián)系在一起。如上面提到的小球從高處掉下效果，對(duì)應(yīng)的是勻加速運(yùn)動(dòng)函數(shù)s1=0.5*g*t2。若再探討之后受到空氣阻力及接觸面材質(zhì)影響，回彈的高度s2=s1*n(0<n<1，可以假定n=0.64)，如此循環(huán)下去，直至小球最后停在地上，這樣就可以模擬出整個(gè)小球掉下效果。

現(xiàn)實(shí)生活中的運(yùn)動(dòng)效果豐富多樣，只靠css3提供的幾個(gè)基本動(dòng)畫(huà)函數(shù)是不足以模擬的，例如彈簧動(dòng)畫(huà)效果等。要模擬這些真實(shí)的效果，就要學(xué)會(huì)如何獲得這些效果背后的動(dòng)畫(huà)函數(shù)了。

下圖是用了彈簧曲線效果和只用基本的動(dòng)畫(huà)曲線效果的彈窗對(duì)比：

2. 探究運(yùn)動(dòng)曲線方程

以下以彈簧動(dòng)畫(huà)為例，探究一下怎樣模擬出這個(gè)效果。

ios9提供了CASpringAnimation類(lèi)實(shí)現(xiàn)該效果，而web上就沒(méi)有提供類(lèi)似函數(shù)。但我們?nèi)匀豢梢酝ㄟ^(guò)以前學(xué)過(guò)的物理學(xué)和數(shù)學(xué)知識(shí)來(lái)做一下研究。

下面有一個(gè)彈簧塊，假設(shè)它質(zhì)量為1，在它不動(dòng)的時(shí)候位置是x = 1，則拉伸時(shí)的距離就是x-1了:

將這比作一個(gè)動(dòng)畫(huà)，彈簧塊在時(shí)間t時(shí)所處的位置x就可以看作動(dòng)畫(huà)曲線函數(shù)x = f(t)。如果我們求得這個(gè)函數(shù)公式，就可以模擬出這個(gè)動(dòng)畫(huà)效果了。對(duì)此，下圖將通過(guò)物理學(xué)公式和數(shù)學(xué)知識(shí)進(jìn)行探討。

在Wolfram | Alpha中輸入以上公式后得出

使用工具繪制函數(shù)得：

感覺(jué)還是蠻像一個(gè)彈簧曲線的運(yùn)動(dòng)軌跡的嘛。像這樣，如果我們要模仿自然生活中的某個(gè)運(yùn)動(dòng)軌跡，可以如上探究一下背后的物理方程，運(yùn)用數(shù)學(xué)知識(shí)計(jì)算，和使用合適的工具，來(lái)模擬出對(duì)應(yīng)的運(yùn)動(dòng)曲線。但估計(jì)很多人都把這些知識(shí)還給老師了，因此如果所有曲線都要自己探究的話，就真是太難了。

莫怕，后面還有一大半的邊幅，就是幫你解決這個(gè)問(wèn)題的。

3. 常用的運(yùn)動(dòng)曲線

世界上是有很多大神的，他們已經(jīng)研究出一系列常用的動(dòng)畫(huà)曲線了。

對(duì)此做一下簡(jiǎn)單的介紹：

* In和Out：大多數(shù)In曲線是從慢到快，可以結(jié)合汽車(chē)開(kāi)始跑起來(lái)的場(chǎng)景來(lái)理解；大多數(shù)Out曲線是從快到慢，可以結(jié)合汽車(chē)慢慢停下來(lái)的場(chǎng)景來(lái)理解。通常元素飛入時(shí)用Out動(dòng)畫(huà)，飛出時(shí)用In動(dòng)畫(huà)，而元素切換時(shí)可以用inOut動(dòng)畫(huà)（如banner里的圖片切換）。如果細(xì)心留意一下，你會(huì)發(fā)現(xiàn)其實(shí)Out曲線就是In曲線從右到左運(yùn)動(dòng)的軌跡，他們是中心對(duì)稱(chēng)的。

* Quad ： x^2，是一條二次方曲線
* Cubic ： x^3，是一條三次方曲線
* Quart ： x^4，是一條四次方曲線
* Quint： x^5，是一條五次方曲線
* Sine ：sin(x^(pi/2))
* Expo：2^(10(x-1))，是一個(gè)開(kāi)始非常慢，中后期非常快的曲線
* Circ：顧名思義就是弧（1/4圓，如果選擇了InOut就是兩個(gè)外切的1/4圓）
* Bounce：這是個(gè)模擬小球落地的反彈曲線
* elastic：這是個(gè)模擬彈簧運(yùn)動(dòng)的曲線，就是我們前面研究想得出的曲線

這么多曲線，可能大家一看就暈了。我個(gè)人理解，用得比較多的應(yīng)該是其中的幾個(gè)：

1. Quad – x^2：這條二次方曲線，就是勻變速直線運(yùn)動(dòng)曲線，大家應(yīng)該還記得初中背得滾瓜爛熟的s=0.5 * a * t2吧。
有了勻變速運(yùn)動(dòng)曲線，很多現(xiàn)實(shí)中的運(yùn)動(dòng)都可以模擬了，如勻加速運(yùn)動(dòng)、摩擦力勻減速運(yùn)動(dòng)。如果再組合使用曲線，就能模擬出更多運(yùn)動(dòng)了，例如y軸使用二次曲線，x軸使用線性曲線，就模擬出一個(gè)平拋動(dòng)畫(huà)了。
月影大神分享過(guò)一個(gè)ppt，里面列舉了一些勻加/減速時(shí)的二維運(yùn)動(dòng)的動(dòng)畫(huà)曲線及實(shí)現(xiàn)：前端動(dòng)畫(huà)原理與實(shí)現(xiàn)

2. Cubic – x^3:這是條三次方曲線，大家還記得初中物理哪兒用到這條曲線嗎？。。。。對(duì)了，就是變加速直線運(yùn)動(dòng)，如下圖：

在此再附一張上面列舉的冪函數(shù)曲線對(duì)比圖供參考和使用：

3.elastic曲線：這個(gè)就是前面在研究的彈簧曲線。實(shí)現(xiàn)了和ios的spring動(dòng)畫(huà)相似的效果。

4.Bounce曲線：模擬小球落地效果的曲線。

除此以外，通過(guò)用sin曲線設(shè)置物體的透明度，可以實(shí)現(xiàn)呼吸燈效果。

在接下來(lái)介紹的GreenSock庫(kù)中，還有一些動(dòng)畫(huà)曲線可供使用：

有了這些曲線，我們下一步就是要使用它了，這兒將通過(guò)js和css來(lái)使用這些曲線。

4.通過(guò)js使用動(dòng)畫(huà)曲線：

以上這些曲線的函數(shù)可以在這個(gè)js中找到：JS

借助這些函數(shù)和requestAnimationFrame，我們可以方便地實(shí)現(xiàn)曲線效果，如：

效果預(yù)覽請(qǐng)戳這里

接著我們分析一下這些函數(shù)怎樣使用。大部分的曲線動(dòng)畫(huà)都包含4個(gè)入?yún)ⅲ?br /> * t:當(dāng)前時(shí)間
* b:初始位置
* c: 結(jié)束位置
* d:運(yùn)動(dòng)時(shí)間

我們主要關(guān)心的就是b、c、d，可以理解為物體用了d毫秒從b變成c。這是不是很像設(shè)置css動(dòng)畫(huà)時(shí)要關(guān)心的東西呢。而t是給程序獲得當(dāng)前時(shí)間，計(jì)算出此時(shí)間下對(duì)應(yīng)的值。

有些動(dòng)畫(huà)函數(shù)，例如彈簧動(dòng)畫(huà)函數(shù)Elastic，還有a和p參數(shù)。經(jīng)試驗(yàn)，a:影響振幅，p影響來(lái)回次數(shù)，按這兒關(guān)于ios彈簧動(dòng)畫(huà)的描述，a的設(shè)置相當(dāng)于質(zhì)量，而p相當(dāng)于阻尼系數(shù)。

如果不想重復(fù)造輪子的話，我搜集了2個(gè)動(dòng)畫(huà)曲線實(shí)現(xiàn)庫(kù)jstween和GreenSock推薦給大家使用。兩個(gè)庫(kù)都是挺容易上手使用的，而且還擴(kuò)展了很多功能，例如按運(yùn)動(dòng)曲線同時(shí)改變多個(gè)屬性、動(dòng)畫(huà)播放時(shí)或完成時(shí)執(zhí)行回調(diào)函數(shù)等。

以讓目標(biāo)通過(guò)彈簧效果在2秒內(nèi)從x軸上400像素位置移動(dòng)到0像素位置（即通過(guò)彈簧效果從屏幕外移到屏幕內(nèi)）為例，舉個(gè)栗子：

在庫(kù)選用方面考慮，如果想要輕量的，可以選擇jstween，只要14k。而GreenSock相對(duì)重量一些（最少得引入TweenLite.min.js、EasePack.min.js、CSSPlugin.min.js，共74k），但他提供了更多的運(yùn)動(dòng)曲線可供選擇，而且還提供其中一些曲線的參數(shù)設(shè)置，如可以設(shè)置彈簧曲線的物體質(zhì)量和阻尼系數(shù)，這是tweenjs所沒(méi)有的。此外GreenSock還提供了一個(gè)在線調(diào)節(jié)參數(shù)預(yù)覽效果的頁(yè)面。大家可以根據(jù)需要選用合適的庫(kù)來(lái)實(shí)現(xiàn)效果。

5.使用css實(shí)現(xiàn)曲線動(dòng)畫(huà)效果

我們也可以把這些運(yùn)動(dòng)曲線運(yùn)用到CSS Animation的@keyframes中。以下還是以讓目標(biāo)通過(guò)彈簧效果從x軸上400像素位置移動(dòng)到0像素位置為例，使用Sass來(lái)做：

//引入函數(shù)庫(kù) https://github.com/terkel/mathsass，實(shí)現(xiàn)sin，cos等數(shù)學(xué)函數(shù)
@import "node_modules/mathsass/dist/math";

//編寫(xiě)彈簧曲線函數(shù)
@function elasticAniFn($t) {
@return -0.5 * pow(exp(1), (-6 * $t)) * (-2 * pow(exp(1), (6 * $t)) + sin(12 * $t) + 2 * cos(12 * $t))
}

6.可視化實(shí)現(xiàn)工具介紹

在此我推薦Stylie，一個(gè)可視化調(diào)節(jié)運(yùn)動(dòng)曲線且自動(dòng)生成CSS的工具。

如圖所示，左邊是動(dòng)畫(huà)預(yù)覽，白色小球會(huì)按照設(shè)置的曲線不停運(yùn)動(dòng)，下方是時(shí)間進(jìn)度條，右邊是設(shè)置面板。通過(guò)可視化地給小球設(shè)置每個(gè)時(shí)間節(jié)點(diǎn)上的狀態(tài)及狀態(tài)變化時(shí)過(guò)渡的運(yùn)動(dòng)曲線來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。

對(duì)設(shè)置面板做一下簡(jiǎn)單說(shuō)明：

1.第一個(gè)0ms處表示開(kāi)始節(jié)點(diǎn)時(shí)的狀態(tài)，第二個(gè)1000ms處表示1000ms處時(shí)間節(jié)點(diǎn)的狀態(tài)，可以點(diǎn)擊它來(lái)修改時(shí)間。點(diǎn)擊右上角的加號(hào)可以添加新的時(shí)間節(jié)點(diǎn)。

2.x和y分別表示translateX和translateY，即橫坐標(biāo)及縱坐標(biāo)，不過(guò)一般我會(huì)直接拖動(dòng)左邊的綠色十字來(lái)調(diào)整位置；s表示scale，即縮放倍率；rX、rY、rZ表示rotateX、rotateY、rotateZ，即繞X、Y、Z軸的旋轉(zhuǎn)角度；每個(gè)狀態(tài)右邊都可以選擇運(yùn)動(dòng)曲線，如linear是線性運(yùn)動(dòng)曲線，bounce是小球落地的運(yùn)動(dòng)曲線。

調(diào)整滿意后就可以導(dǎo)出代碼了：

Orient generated animation to是說(shuō)所有的位移數(shù)值采用相對(duì)（第一幀的）位移，還是絕對(duì)定位（相對(duì)于左上角）。class name處可以修改動(dòng)畫(huà)的類(lèi)名，vendors處可以添加需要的瀏覽器前綴（一般勾選WebKit和W3C就好了）。

大概就是這樣了，這個(gè)工具基本上可以解決很多CSS動(dòng)畫(huà)需求了，具體做得怎樣就看各人的功力了。

總結(jié)

除了基本的css動(dòng)畫(huà)函數(shù)，我們還可以用更豐富自然的曲線函數(shù)去模擬物體的運(yùn)動(dòng)。在使用場(chǎng)景上，如果不介意庫(kù)體積、想有豐富的曲線函數(shù)供使用，可以用GreenSock來(lái)實(shí)現(xiàn)；對(duì)庫(kù)體積有要求，可以用jstween來(lái)實(shí)現(xiàn)；覺(jué)得只想實(shí)現(xiàn)其中一個(gè)動(dòng)畫(huà)效果而覺(jué)得沒(méi)必要引入整個(gè)庫(kù)，可以只使用其動(dòng)畫(huà)函數(shù)和requestAnimationFrame來(lái)實(shí)現(xiàn)；不想用js實(shí)現(xiàn)（UI開(kāi)發(fā)工程師的驕傲），可以用sass+動(dòng)畫(huà)函數(shù)來(lái)實(shí)現(xiàn)；想所見(jiàn)即所得，可以用Stylie來(lái)實(shí)現(xiàn)。而遇到比較特別的動(dòng)畫(huà)效果，不能用前面列舉的動(dòng)畫(huà)函數(shù)來(lái)實(shí)現(xiàn)，就只能通過(guò)研究物體運(yùn)動(dòng)背后的運(yùn)動(dòng)曲線實(shí)現(xiàn)了。希望大家看完之后能有所收獲，撒花～

參考文獻(xiàn)：

[1]Thai Pangsakulyanont.Spring Animation in CSS

[2]阿布evo.可視化CSS3動(dòng)畫(huà)生成神器 - Stylie

「動(dòng)效設(shè)計(jì)三步走」

1. 先學(xué)會(huì)分析：《動(dòng)效丨七何分析法幫你全面分析界面動(dòng)效》
2. 動(dòng)效設(shè)計(jì)方法：《改善你的UX設(shè)計(jì)！值得參考的四個(gè)動(dòng)效使用方法》
3. 提升用戶體驗(yàn)：《5個(gè)小技巧，用動(dòng)效提升界面的用戶體驗(yàn)就這么簡(jiǎn)單》

原文地址：騰訊ISUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com