眾所周知，JavaScript有一個(gè)原生動(dòng)畫(huà)API，叫做Web Animations API。在接下來(lái)的文章中，我們將簡(jiǎn)稱(chēng)為WAAPI。

在本文中，我們將從各個(gè)方面來(lái)比較WAPPI和CSS中的動(dòng)畫(huà)。各位看官可自行判斷其中哪個(gè)更好，哪個(gè)有所欠缺。

WAAPI的基礎(chǔ)知識(shí)

如果你曾經(jīng)使用jQuery  .animate()，WAAPI的基本語(yǔ)法應(yīng)該看起來(lái)很熟悉。 

var element = document.querySelector('.animate-me');

該animate方法接受兩個(gè)參數(shù)：keyframes和duration。與jQuery差別的是，它不但具有內(nèi)置在瀏覽器中的優(yōu)點(diǎn)，并且性能也更好。

第一個(gè)參數(shù)，keyframes應(yīng)該是一個(gè)對(duì)象數(shù)組。每個(gè)對(duì)象都是我們動(dòng)畫(huà)中的一個(gè)keyframe。這是一個(gè)簡(jiǎn)單的例子：

var keyframes = [

第二個(gè)參數(shù)，duration，是我們想要?jiǎng)赢?huà)持續(xù)多久。在上面的例子中是 1000 毫秒。我們來(lái)看一個(gè)更令人興奮的例子。

#用WAAPI重新創(chuàng)建animista CSS動(dòng)畫(huà)

有一些被稱(chēng)為“模糊的幻燈片”入場(chǎng)動(dòng)畫(huà)的東西?？雌饋?lái)很可愛(ài)。

以下是CSS中的keyframes：

0% {

WAAPI中的代碼相同：

var keyframes = [

我們已經(jīng)看到將keyframes應(yīng)用到要?jiǎng)赢?huà)的任何元素是多么容易：

element.animate(keyframes， 700);

為了簡(jiǎn)單起見(jiàn)，我只指定了duration。但是，我們可以使用這個(gè)第二個(gè)參數(shù)來(lái)傳遞更多的選項(xiàng)。至少我們也應(yīng)該指定一個(gè)easing。以下是可用選項(xiàng)的完整列表，其中包羅一些示例值：

var options = {

有了這些選項(xiàng)，我們的動(dòng)畫(huà)將從頭開(kāi)始，沒(méi)有任何延遲，循環(huán)永遠(yuǎn)在向前和向后播放。

   點(diǎn)我查看代碼以及效果!!!

令人懊惱的是，對(duì)于我們熟悉CSS動(dòng)畫(huà)的人來(lái)說(shuō)，一些術(shù)語(yǔ)與我們習(xí)慣的差別。雖然在往正面想，，這可以讓我們打字稍微快點(diǎn)!

是easing而不是animation-timing-function

是iterations而不是animation-iteration-count。如果我們希望動(dòng)畫(huà)永遠(yuǎn)重復(fù)，是Infinity而不是infinite的。有點(diǎn)混亂，無(wú)限不是引用。Infinity是一個(gè)JavaScript關(guān)鍵字，而其他值是字符串。

我們使用毫秒而不是秒，對(duì)于之前編寫(xiě)過(guò)許多JavaScript的人來(lái)說(shuō)，這應(yīng)該是熟悉的。(你可以在CSS動(dòng)畫(huà)中使用毫秒數(shù)，但很少有人使用。)

當(dāng)我第一次嘗試iterationStart的時(shí)候我遇到了問(wèn)題。為什么要從指定的迭代開(kāi)始，而不但僅是減少迭代次數(shù)?當(dāng)你使用十進(jìn)制數(shù)時(shí)，此選項(xiàng)非常有用。例如，你可以將其設(shè)置為  .5，動(dòng)畫(huà)將從中間開(kāi)始播放。將整段動(dòng)畫(huà)分為兩段，所以如果你的迭代次數(shù)設(shè)置為1，而且你的iterationStart設(shè)置為  .5，動(dòng)畫(huà)將從一半到動(dòng)畫(huà)結(jié)束播放，然后從動(dòng)畫(huà)開(kāi)頭開(kāi)始，結(jié)束于中間! 

值得注意的是，你也可以將迭代次數(shù)設(shè)置為小于1。例如：

var option = {

這將從中間到最后播放動(dòng)畫(huà)。 

endDelay：endDelay如果要將多個(gè)動(dòng)畫(huà)串在一起，但是希望在一個(gè)動(dòng)畫(huà)的結(jié)尾和任何后續(xù)動(dòng)畫(huà)的開(kāi)始之間存在差距。

#Easing

Easing是任何動(dòng)畫(huà)中最重要的元素之一。WAAPI為我們提供了兩種差別的方式設(shè)置easing- 在我們的keyframes陣列或我們的選項(xiàng)對(duì)象內(nèi)。

在CSS中，如果你應(yīng)用了，animation-timing-function： ease-in-out你可能會(huì)假設(shè)你的動(dòng)畫(huà)的淡入和淡出。實(shí)際上，這些easing應(yīng)用在keayframes之間，而不是整個(gè)動(dòng)畫(huà)。這可以對(duì)動(dòng)畫(huà)的感覺(jué)進(jìn)行細(xì)粒度的控制。WAAPI還提供這種能力。

var keyframes = [

值得注意的是，在CSS和WAAPI中，你不該該傳入最后一幀的easing值，因?yàn)檫@將不起作用。這是很多人犯的錯(cuò)誤。

有時(shí)候，在整個(gè)動(dòng)畫(huà)中添加easing效果更為直不雅觀。這在CSS中是不成能的，但現(xiàn)在可以在WAAPI中實(shí)現(xiàn)。

var options = {

你可以看到這兩種easing的區(qū)別：

點(diǎn)擊我查看代碼及效果!!!!!!!Ease vs線性

值得注意的是CSS動(dòng)畫(huà)和WAAPI之間的另一個(gè)區(qū)別：CSS ease的默認(rèn)值是WAAPI的默認(rèn)值linear。Ease實(shí)際上是ease-in-out的一個(gè)版本，是一個(gè)非常好的選擇。同時(shí)，線性是看起來(lái)很沉悶 - 一致的速度看起來(lái)機(jī)械和不自然。它可能當(dāng)選為默認(rèn)值，因?yàn)樗亲钪辛⒌倪x項(xiàng)。然而，在使用WAAPI時(shí)，使用緩存時(shí)更重要的是使用CSS，以免你的動(dòng)畫(huà)看起來(lái)很乏味和機(jī)械。

性能

WAAPI提供與CSS動(dòng)畫(huà)相同的性能改進(jìn)，盡管這并不料味著平滑的動(dòng)畫(huà)是不成制止的。 

我希望這個(gè)API的性能優(yōu)化意味著我們可以逃避使用will-change和完全hack translateZ?- 最終可能。但是，至少在目前的瀏覽器實(shí)現(xiàn)中，這些屬性在處理jank問(wèn)題方面仍然是有幫手和須要的。

標(biāo)簽：九江 鹽城 東營(yíng) 烏魯木齊 林芝