如何讓你的動畫更自然-運動曲線探究與應用

叨叨道 2017-04-30

展開全文

| 導語本文將從為什么要探究更自然的動畫,、如何探究運動曲線方程,、列舉常用的運動曲線、分別使用js和css實現(xiàn)曲線動畫效果,、可視化實現(xiàn)工具這幾個方面進行介紹,。希望閱讀后，本文能給你在制作動畫效果時帶來一點幫助,。

1.為什么需要探究更自然的動畫

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

自然的動畫效果應該是和我們在現(xiàn)實生活中看到的物體運動軌跡相似的,。這樣的效果往往與背后的運動曲線函數(shù)緊密聯(lián)系在一起,。如上面提到的小球從高處掉下效果，對應的是勻加速運動函數(shù)s1=0.5*g*t2,。若再探討之后受到空氣阻力及接觸面材質影響,，回彈的高度s2=s1*n(0<><>小球掉下效果。

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

下圖是用了彈簧曲線效果和只用基本的動畫曲線效果的彈窗對比：

2.探究運動曲線方程

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

ios9提供了CASpringAnimation類實現(xiàn)該效果,，而web上就沒有提供類似函數(shù)。但我們仍然可以通過以前學過的物理學和數(shù)學知識來做一下研究,。

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

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

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

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

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

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

3.常用的運動曲線

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

對此做一下簡單的介紹：
* In和Out：大多數(shù)In曲線是從慢到快,，可以結合汽車開始跑起來的場景來理解；大多數(shù)Out曲線是從快到慢,，可以結合汽車慢慢停下來的場景來理解。通常元素飛入時用Out動畫,，飛出時用In動畫,，而元素切換時可以用inOut動畫（如banner里的圖片切換）,。如果細心留意一下，你會發(fā)現(xiàn)其實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：顧名思義就是?。?/4圓,，如果選擇了InOut就是兩個外切的1/4圓）
* Bounce：這是個模擬小球落地的反彈曲線
* elastic：這是個模擬彈簧運動的曲線，就是我們前面研究想得出的曲線

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

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

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

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

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

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

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

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

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

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

以上這些曲線函數(shù)寫成js是類似這樣的：

//部分代碼展示
var Tween = {
Linear: function(t, b, c, d) { return c*t/d + b; },
Quad: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) {
return -c *(t /= d)*(t-2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t-2) - 1) + b;
}
},
……

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

var ball = document.getElementById('ball')
var elasticFall = function() {
var start = 0,
beginingValue = 0,
changeValue = 400,
during = 100;
var _run= function() {
start++;
var top = Tween.Elastic.easeOut(start, beginingValue, changeValue, during);
ball.style.webkitTransform = 'translateY('+top+'px)';
if(start during) requestAnimationFrame(_run);
}
_run();
};
elasticFall();

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

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

有些動畫函數(shù),，例如彈簧動畫函數(shù)Elastic，還有a和p參數(shù),。經試驗,，a:影響振幅,，相當于設置了質量，p影響來回次數(shù),，相當于設置了阻尼系數(shù),。

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

以讓目標通過彈簧效果在2秒內從x軸上400像素位置移動到0像素位置（即通過彈簧效果從屏幕外移到屏幕內）為例，舉個栗子：

//通過jstween實現(xiàn)
JT.fromTo($target, 2,
{
x:400
}, {
x:0,
ease: JT.Elastic.Out,
onEnd: function (n) {
console.log('animate end.')
}
});
//通過GreenSock實現(xiàn)
TweenLite.fromTo($target, 2,
{
x: '400px'
},
{
x: '0',
ease: Elastic.easeOut.config(0.5, 0.4),
onComplete:function(){
console.log('animate end.')
}
}
);

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

5.使用css實現(xiàn)曲線動畫效果

我們也可以把這些運動曲線運用到CSS Animation的@keyframes中。以下還是以讓目標通過彈簧效果從x軸上400像素位置移動到0像素位置為例,，使用Sass來做：

//引入函數(shù)庫 https://github.com/terkel/mathsass,，實現(xiàn)sin,，cos等數(shù)學函數(shù)
@import 'node_modules/mathsass/dist/math';
//編寫彈簧曲線函數(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))
}
//編寫物體位移隨時間變化的函數(shù)
//$b: 初始值
//$c: 變化量
//$p: 當前運動的進度百分比
//可以理解為物體從$b運動到$c,$p用來表示當前運動了 $p%
@function aniFn($b, $c, $p) {
@return $b + $p * ($c - $b);
}
//聲明動畫
//由此生成的css：
//@keyframes moveAni {
//0% {
// transform: translateX(400px);
//}
//1% {
// transform: translateX(396.54493px);
//}
//2% {
// transform: translateX(386.76446px);
//}
//3% {
// transform: translateX(371.53953px);
//}
@keyframes moveAni {
@for $i from 0 through 100 {
{$i}% {
transform:translateX(aniFn(400px, 0, elasticAniFn($i / 100)));
}
}
}
//使用動畫
.box {
animation: 1s moveAni linear;
transform: rotate
}