眾所周知，JavaScript有一個原生動畫API，叫做Web Animations API。在接下來的文章中，我們將簡稱為WAAPI。

在本文中，我們將從各個方面來比較WAPPI和CSS中的動畫。各位看官可自行判斷其中哪個更好，哪個有所欠缺。

WAAPI的基礎知識

如果你曾經使用jQuery  .animate()，WAAPI的基本語法應該看起來很熟悉。 

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

該animate方法接受兩個參數：keyframes和duration。與jQuery差別的是，它不但具有內置在瀏覽器中的優點，并且性能也更好。

第一個參數，keyframes應該是一個對象數組。每個對象都是我們動畫中的一個keyframe。這是一個簡單的例子：

var keyframes = [

第二個參數，duration，是我們想要動畫持續多久。在上面的例子中是 1000 毫秒。我們來看一個更令人興奮的例子。

#用WAAPI重新創建animista CSS動畫

有一些被稱為“模糊的幻燈片”入場動畫的東西。看起來很可愛。

以下是CSS中的keyframes：

0% {

WAAPI中的代碼相同：

var keyframes = [

我們已經看到將keyframes應用到要動畫的任何元素是多么容易：

element.animate(keyframes， 700);

為了簡單起見，我只指定了duration。但是，我們可以使用這個第二個參數來傳遞更多的選項。至少我們也應該指定一個easing。以下是可用選項的完整列表，其中包羅一些示例值：

var options = {

有了這些選項，我們的動畫將從頭開始，沒有任何延遲，循環永遠在向前和向后播放。

   點我查看代碼以及效果!!!

令人懊惱的是，對于我們熟悉CSS動畫的人來說，一些術語與我們習慣的差別。雖然在往正面想，，這可以讓我們打字稍微快點!

是easing而不是animation-timing-function

是iterations而不是animation-iteration-count。如果我們希望動畫永遠重復，是Infinity而不是infinite的。有點混亂，無限不是引用。Infinity是一個JavaScript關鍵字，而其他值是字符串。

我們使用毫秒而不是秒，對于之前編寫過許多JavaScript的人來說，這應該是熟悉的。(你可以在CSS動畫中使用毫秒數，但很少有人使用。)

當我第一次嘗試iterationStart的時候我遇到了問題。為什么要從指定的迭代開始，而不但僅是減少迭代次數?當你使用十進制數時，此選項非常有用。例如，你可以將其設置為  .5，動畫將從中間開始播放。將整段動畫分為兩段，所以如果你的迭代次數設置為1，而且你的iterationStart設置為  .5，動畫將從一半到動畫結束播放，然后從動畫開頭開始，結束于中間! 

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

var option = {

這將從中間到最后播放動畫。 

endDelay：endDelay如果要將多個動畫串在一起，但是希望在一個動畫的結尾和任何后續動畫的開始之間存在差距。

#Easing

Easing是任何動畫中最重要的元素之一。WAAPI為我們提供了兩種差別的方式設置easing- 在我們的keyframes陣列或我們的選項對象內。

在CSS中，如果你應用了，animation-timing-function： ease-in-out你可能會假設你的動畫的淡入和淡出。實際上，這些easing應用在keayframes之間，而不是整個動畫。這可以對動畫的感覺進行細粒度的控制。WAAPI還提供這種能力。

var keyframes = [

值得注意的是，在CSS和WAAPI中，你不該該傳入最后一幀的easing值，因為這將不起作用。這是很多人犯的錯誤。

有時候，在整個動畫中添加easing效果更為直不雅觀。這在CSS中是不成能的，但現在可以在WAAPI中實現。

var options = {

你可以看到這兩種easing的區別：

點擊我查看代碼及效果!!!!!!!Ease vs線性

值得注意的是CSS動畫和WAAPI之間的另一個區別：CSS ease的默認值是WAAPI的默認值linear。Ease實際上是ease-in-out的一個版本，是一個非常好的選擇。同時，線性是看起來很沉悶 - 一致的速度看起來機械和不自然。它可能當選為默認值，因為它是最中立的選項。然而，在使用WAAPI時，使用緩存時更重要的是使用CSS，以免你的動畫看起來很乏味和機械。

性能

WAAPI提供與CSS動畫相同的性能改進，盡管這并不料味著平滑的動畫是不成制止的。 

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

標簽：九江 鹽城 東營 烏魯木齊 林芝