easing是什么？這一節(jié)都是關(guān)于easing的內(nèi)容,？沒錯,！Easing是我覺得我們網(wǎng)頁設(shè)計(jì)師目前還探討得不夠的內(nèi)容之一。

“時間是動畫的一部分,，它為每一次移動賦予了意義,。移動可以是通過簡單地在兩個不同的位置繪制相同的內(nèi)容，然后在兩者之間插入數(shù)個其它的圖片來完成,。但是這樣屏幕上的看到的就只是單純的移動,，而不是動畫?！?em style="box-sizing: inherit;">——Harold Whitaker and John Halas, Timing for Animation

而Easing有足夠的能力去影響動畫的交流。某一個對象是重要的,，但是它到達(dá)相應(yīng)位置的方式可能更重要得多,。事實(shí)上，Timing for Animation這本書詳細(xì)地寫了這方面的內(nèi)容,。雖然我們不太可能做到把動畫繪制成像迪斯尼那樣的,，但是了解如果控制我們動畫的移動還是很重要的。

這個移動傳達(dá)的是對象什么樣的情緒,、分量和其它關(guān)鍵性格以及溝通的因素,。這些移動或變化的過渡為我們提供了一個很好的激流的機(jī)會，盡管它們可能只會停留不到一秒的時間,。

根據(jù)定義,，Easing是速率被分配到整個動畫過程中的方式,。在CSS中，我們的easing是用animation-timing-function屬性處理的,。我們有三種定義timing的方式：關(guān)鍵字,；自定義三次貝塞爾曲線；steps,。steps在這里是奇數(shù)的,，因?yàn)樗鼈冇凶约邯?dú)特的概念，所以它實(shí)際上并沒有做任何的easing,。我們將在最后的一部分內(nèi)容中簡要地探討一下steps,。

easing關(guān)鍵字

首先，我們來仔細(xì)地看一下預(yù)定義的關(guān)鍵字選項(xiàng),，來對幕后發(fā)生的事情有更進(jìn)一步的了解,。我們預(yù)定義的easing關(guān)鍵字是：ease(默認(rèn)); linear; ease-in; ease-out和ease-in-out。

如果我們要使用linear Easing創(chuàng)建一個在兩個關(guān)鍵幀之間一幀一幀線性移動的小球,，它的運(yùn)動效果如下：

對象以保持相同的速度在兩個關(guān)鍵幀之間移動,。速度從整個動畫的開始到結(jié)束都是不變的。這通常會被視為非常機(jī)械的不自然的移動,，因?yàn)樵诂F(xiàn)實(shí)生活中,，沒有東西會像它這樣以恒定的速度移動。

如果我們用ease-in創(chuàng)建相同類型的插圖：

該移動在一開始的時候比較慢,，然后在接近終點(diǎn)的時候慢慢加快速度,。在一般情況下，這種easing類型創(chuàng)造了一種蓄勢待發(fā)的加速感,。對象在移動過程中的速度加快可以暗示其重量,，還可以加上其他的外力來同它配合。

使用ease-out給了我們相反的感受,。動畫在一開始的時候速度比較快,，然后隨著慢慢接近終點(diǎn)，速度越來越慢：

結(jié)合ease-in和ease-out的概念,，我們得到了ease-in-out,，這個值會讓對象在中點(diǎn)的時候速度上升到最快，在開始和結(jié)束的時候速度較慢,。從ease值得到的Easing移動是ease-in-out的變體,；ease在結(jié)束的時候有一個更劇烈的減速，但是你可以看到它們其實(shí)看起來是很相似的,。個人而言,，我更喜歡ease-in-out，因?yàn)樵诖蠖鄶?shù)情況下運(yùn)動比較平衡。

貝塞爾曲線

值得慶幸的是,，easing的值我們有不止五個關(guān)鍵字可以選擇,。在我們希望能夠有更多的easing選擇的時候，三次貝塞爾曲線來拯救我們了,！上面的幾個關(guān)鍵字也可以被定義為三次貝塞爾曲線,。這些關(guān)鍵字有點(diǎn)像常見貝塞爾曲線的快捷方式。當(dāng)你需要的控制比上邊五個關(guān)鍵字提供的更多的時候,，你可以為你的timing函數(shù)創(chuàng)建三次貝塞爾曲線,，這樣easing可選擇的值就幾乎是無限的！

創(chuàng)建曲線時,，我們根據(jù)時間來計(jì)算動畫的進(jìn)展,，然后得到這樣的一條代表了動畫過程中的速率的曲線。

linear easing關(guān)鍵字對應(yīng)的貝塞爾曲線

我們不需要去糾結(jié)它們背后的所有計(jì)算,，因?yàn)槲覀兊哪康牟辉谟诖?，盡管你對貝塞爾曲線的基礎(chǔ)充滿好奇心，想要研究它的每個數(shù)學(xué)方面的細(xì)節(jié),。理解曲線的關(guān)鍵是：曲線越陡峭代表速度越快,，曲線越平坦代表速度越慢。下邊這條曲線是ease-in-out關(guān)鍵字對應(yīng)的貝塞爾曲線,。中間是最陡峭,，所以移動得最快，最后是平緩的,，所以速度變慢了,。

ease-in-out關(guān)鍵字對應(yīng)的貝塞爾曲線

對曲線形狀的小調(diào)整都會影響導(dǎo)致我們動畫的細(xì)微差異。每條三次貝塞爾曲線都是通過四個在0和1這個范圍之間的值定義的,，這四個值用于表達(dá)曲線該如何繪制,。

cubic-bezier(0.165, 0.840, 0.440, 1.000)

如果是像上邊這樣寫，那它們對我們大多數(shù)人是沒有意義的,，因?yàn)楦静幻靼姿鼈兇淼囊馑?。想要讓你打破在?shù)學(xué)課上使用舊圖形計(jì)算器的習(xí)慣是需要相當(dāng)一段時間的。幸運(yùn)的是,，我們可以使用一些工具來讓這些數(shù)字的意義可視化,，也更直觀，方便我們理解,。

創(chuàng)建三次貝塞爾曲線的工具

我最喜歡的三次貝塞爾曲線生成工具是,，Matthew Lein 的 Ceaser,，提供了各種不同的預(yù)設(shè),，并允許你拖動點(diǎn)來創(chuàng)建你自己的貝塞爾曲線，還可以預(yù)覽你創(chuàng)建的easing。當(dāng)你對生成的東西滿意的時候,，你就可以復(fù)制它動態(tài)生成的代碼,，并把它放在你的CSS中使用。Ceaser還提供了和Penner easing方程（常用于Flash中,，現(xiàn)已被移植到JavaScript,、CSS等地方使用）等同的CSS。

在Ceaser中創(chuàng)建貝塞爾曲線

Ceaser不是唯一可以取得easing信息的地方,，Easings.net展示了一些可選的三次貝塞爾曲線的交互版本,，以及由此產(chǎn)生的移動都在同一個地方。Lea Verou的也可以讓你創(chuàng)建,、比較和分享三次貝塞爾函數(shù),。動畫是一個可視化的東西，所以有這些可視化編輯器和工具來幫助你取得你想要的移動效果是非常好的,。這比靠猜數(shù)字來想象更有效得多,。

現(xiàn)在我們已經(jīng)對CSS中的easing有了相對深入的了解，你可以通過對你的動畫進(jìn)行微調(diào),，做出合適的easing選擇,，讓你得到需要的運(yùn)動和信息。

如果這里討論的easing,，timing和動畫原則激起了你的興趣,，我強(qiáng)烈推薦你閱讀一下迪斯尼動畫的十二個基礎(chǔ)原則，還有Timing for Animation,、The Animator’s Survival Kit這兩本書,。傳統(tǒng)動畫工藝有非常豐富的歷史，值得我們?nèi)W(xué)習(xí),。

Timing函數(shù)并不是萬能的

經(jīng)過前面關(guān)于timing函數(shù)可以做的東西的這么多的介紹,，有一個更重要的點(diǎn)是，CSS要如何使用我們定義的timing函數(shù),。對于關(guān)鍵幀動畫,，timing函數(shù)是在關(guān)鍵幀之間應(yīng)用的。在很多情況下,，你只能給每個動畫指定一個timing函數(shù)：

.someClass { animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }

在這種情況下,，你的三次貝塞爾函數(shù)會在動畫中的每個關(guān)鍵幀之間應(yīng)用。這將決定所有屬性之間的移動樣式,，都會按照你在keyframes中定義的函數(shù)運(yùn)動,。

但這并不總是理想的，尤其是那些復(fù)雜一些的動畫,。當(dāng)你要制作的是比較復(fù)雜的運(yùn)動時,，在所有的關(guān)鍵幀之間應(yīng)用相同的easing,，幾乎是不可能的。一開始的時候它看起來可能會很奇怪,，但是我們可以改變timing函數(shù),，將它應(yīng)用于@keyframes聲明塊中的中期動畫。

@keyframes myAnimation {
    0% { 
        opacity: 0.5; 
    }
    50% {
        opacity: 0.3;
        animation-timing-function: ease-in-out;
    }
    100% { 
        opacity: 1; 
    }
}

在上面的代碼中,，一個ease-in-out的時間函數(shù)會被應(yīng)用在50%到100%的關(guān)鍵幀之間,，但是之前設(shè)置的時間函數(shù)將會被默認(rèn)用于0%到50%關(guān)鍵幀之間。