騰訊超全乾貨!如何讓你的動畫更自然?

    點擊信息與交互設計關注我們!

2. 探究運動曲線方程

以下以彈簧動畫為例,探究一下怎樣模擬出這個效果。

ios9提供了CASpringAnimation類做到該效果,而web上就沒有提供類似函數。但我們仍然可以通過以前學過的物理學和數學知識來做一下研究。

下面有一個彈簧塊,假設它質量為1,在它不動的時候位置是x = 1,則拉伸時的距離就是x-1了:

將這比作一個動畫,彈簧塊在時間t時所處的位置x就可以看作動畫曲線函數x = f(t)。如果我們求得這個函數公式,就可以模擬出這個動畫效果了。對此,下圖將通過物理學公式和數學知識進行探討。

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

使用工具繪制函數得:

感覺還是蠻像一個彈簧曲線的運動軌跡的嘛。像這樣,如果我們要模仿自然生活中的某個運動軌跡,可以如上探究一下背後的物理方程,運用數學知識計算,和使用合適的工具,來模擬出對應的運動曲線。但可能很多人都把這些知識還給老師了,因此如果所有曲線都要自己探究的話,就真是太難了。

莫怕,後面還有一大半的邊幅,就是幫你解決這個問題的。

3. 常用的運動曲線

世界上是有很多大神的,他們已經研究出一系列常用的動畫曲線了。

對此做一下簡單的介紹:
* In和Out:大多數In曲線是從慢到快,可以結合汽車開始跑起來的場景來理解;大多數Out曲線是從快到慢,可以結合汽車慢慢停下來的場景來理解。通常元素飛入時用Out動畫,飛出時用In動畫,而元素切換時可以用inOut動畫(如banner裡的圖片切換)。如果細心留意一下,你會發現其實Out曲線就是In曲線從右到左運動的軌跡,他們是中心對稱的。

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

這麼多曲線,可能大家一看就暈了。我個人理解,用得比較多的應該是其中的幾個:
1. Quad – x^2:這條二次方曲線,就是勻變速直線運動曲線,大家應該還記得初中背得滾瓜爛熟的s=0.5 * a * t²吧。
有了勻變速運動曲線,很多現實中的運動都可以模擬了,如
勻加速運動摩擦力勻減速運動。如果再組合使用曲線,就能模擬出更多運動了,例如y軸使用二次曲線,x軸使用線性曲線,就模擬出一個平拋動畫了。
月影大神分享過一個ppt,裡面列舉了一些勻加/減速時的二維運動的動畫曲線及做到:
前端動畫原理與做到
2. Cubic – x^3:這是條三次方曲線,大家還記得初中物理哪兒用到這條曲線嗎?。。。。對了,就是變加速直線運動,如下圖:

在此再附一張上面列舉的冪函數曲線對比圖供參考和使用:

3.elastic曲線:這個就是前面在研究的彈簧曲線。做到了和ios的spring動畫相似的效果。

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

除此以外,通過用sin曲線設置物體的透明度,可以做到呼吸燈效果。

在接下來介紹的GreenSock庫中,還有一些動畫曲線可供使用:

有了這些曲線,我們下一步就是要使用它了,這兒將通過js和css來使用這些曲線。

4.通過js使用動畫曲線:

以上這些曲線的函數可以在這個js中找到:JS

借助這些函數和requestAnimationFrame,我們可以方便地做到曲線效果,如:

效果預覽請戳這裡
接著我們分析一下這些函數怎樣使用。大部分的曲線動畫都包含4個入參:
* t:當前時間
* b:初始位置
* c: 結束位置
* d:運動時間

我們主要關心的就是b、c、d,可以理解為物體用了d毫秒從b變成c。這是不是很像設置css動畫時要關心的東西呢。而t是給程序獲得當前時間,計算出此時間下對應的值。

有些動畫函數,例如彈簧動畫函數Elastic,還有a和p參數。經試驗,a:影響振幅,p影響來回次數,按這兒關於ios彈簧動畫的描述,a的設置相當於質量,而p相當於阻尼系數。

如果不想重復造輪子的話,我搜集了2個動畫曲線做到庫jstweenGreenSock推薦給大家使用。兩個庫都是挺容易上手使用的,而且還擴展了很多功能,例如按運動曲線同時改變多個屬性、動畫播放時或完成時執行回調函數等。

以讓目標通過彈簧效果在2秒內從x軸上400像素位置移動到0像素位置(即通過彈簧效果從螢幕外移到螢幕內)為例,舉個栗子:

在庫選用方面考慮,如果想要輕量的,可以選擇jstween,只要14k。而GreenSock相對重量一些(最少得引入TweenLite.min.js、EasePack.min.js、CSSPlugin.min.js,共74k),但他提供了更多的運動曲線可供選擇,而且還提供其中一些曲線的參數設置,如可以設置彈簧曲線的物體質量和阻尼系數,這是tweenjs所沒有的。此外GreenSock還提供了一個在線調節參數預覽效果的頁面。大家可以根據需要選用合適的庫來做到效果。

5.使用css做到曲線動畫效果

我們也可以把這些運動曲線運用到CSS [email protected]果從x軸上400像素位置移動到0像素位置為例,使用Sass來做:
//引入函數庫 https://github.com/terkel/mathsass,做到sin,cos等數學函數
@import 「node_modules/mathsass/dist/math」;

//編寫彈簧曲線函數
@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.可視化做到工具介紹

在此我推薦Stylie,一個可視化調節運動曲線且自動生成CSS的工具。

如圖所示,左邊是動畫預覽,白色小球會按照設置的曲線不停運動,下方是時間進度條,右邊是設置面板。通過可視化地給小球設置每個時間節點上的狀態及狀態變化時過渡的運動曲線來做到動畫效果。

對設置面板做一下簡單說明:
1.第一個0ms處表示開始節點時的狀態,第二個1000ms處表示1000ms處時間節點的狀態,可以點擊它來修改時間。點擊右上角的加號可以添加新的時間節點。

2.x和y分別表示translateX和translateY,即橫坐標及縱坐標,不過一般我會直接拖動左邊的綠色十字來調整位置;s表示scale,即縮放倍率;rX、rY、rZ表示rotateX、rotateY、rotateZ,即繞X、Y、Z軸的旋轉角度;每個狀態右邊都可以選擇運動曲線,如linear是線性運動曲線,bounce是小球落地的運動曲線。

調整滿意後就可以導出代碼了:

Orient generated animation to是說所有的位移數值採用相對(第一幀的)位移,還是絕對定位(相對於左上角)。class name處可以修改動畫的類名,vendors處可以添加需要的瀏覽器前綴(一般勾選WebKit和W3C就好了)。

大概就是這樣了,這個工具基本上可以解決很多CSS動畫需求了,具體做得怎樣就看各人的功力了。

總結

除了基本的css動畫函數,我們還可以用更豐富自然的曲線函數去模擬物體的運動。在使用場景上,如果不介意庫體積、想有豐富的曲線函數供使用,可以用GreenSock來做到;對庫體積有要求,可以用jstween來做到;覺得只想做到其中一個動畫效果而覺得沒必要引入整個庫,可以只使用其動畫函數和requestAnimationFrame來做到;不想用js做到(UI開發工程師的驕傲),可以用sass+動畫函數來做到;想所見即所得,可以用Stylie來做到。而遇到比較特別的動畫效果,不能用前面列舉的動畫函數來做到,就只能通過研究物體運動背後的運動曲線做到了。希望大家看完之後能有所收獲,撒花~
參考文獻:
[1]Thai Pangsakulyanont.Spring Animation in CSS
[2]阿布evo.可視化CSS3動畫生成神器 – Stylie

我的出處

                  來源:isux

版權聲明

專委會微信公眾號文章來源於作者授權或者投稿文章,大部分轉載文章都盡量標明了出處以及作者信息,版權都歸作者所有,若涉及到版權問題,請添加微信:dajiangjuan聯繫刪除,謝謝!(有關投稿問題也可騷擾哦!)