這篇文章是由邀請的作者達德利·斯托里 。 SitePoint客人帖子的目的是讓你從著名作家和JavaScript社區的演講引人入勝的內容。

一個API來統治他們

網絡上的動畫一直被劃分為四個不同的陣營：

• CSS轉換和動畫都很高性能和提供關鍵幀，但也費時打造，并提供在CSS中，只有基本的開始和結束控制的JavaScript 。 這往往他們貶謫到簡單的UI響應動畫，循環和頁面加載動畫。
• SMIL （同步多媒體集成語言）是非常強大的，但它也語法重，有不完整的瀏覽器支持。 它也僅限于單純的控制SVG的背景中的元素。
• 提供的JavaScript元素的直接控制，但沒有像關鍵幀或緩解設計師友好的功能的理解，缺乏本土的優化和CSS的性能。 畫布API動畫是美好的，但仍然缺乏基本面的動畫的理解，而不能隨心所欲動畫DOM元素。
• 像JavaScript動畫框架 使用GreenSock嘗試當它涉及到動畫鋪平了的JavaScript傳統的赤字，但有框架的所有相關聯的缺點：頁面加載，性能，學習一種新的語法。

網絡動畫API尋求所有這些的最佳功能集成到一個單一，統一的規范 ，同時消除弊端，建立關鍵幀的原生理解，緩和，并在JavaScript元素的控制，使用相同的屏幕上表現為CSS 。 隨著規范的核心部件現在支持在Chrome和Firefox ，開發無論是在其他的瀏覽器，包括宣布或正在進行的Safari和邊緣 ，再加上強大的填充工具的可用性 ，它的時間給了將Web網頁動畫API認真考慮頁面的生活。

網絡動畫API有助于使動畫網頁設計的主食，打開大門，供應商優化的性能和第三方工具。 -雷切爾納伯斯（@rachelnabors） 2016年9月29日

在JavaScript關鍵幀

讓我們的關鍵幀動畫的最簡單可行的例子之一：從頁面的一側移動紅球元素其他。 無論我們使用哪種技術，該元素將是相同的：

 <div id="redball"></div>
 

作為將在初始CSS：

 body {
  margin: 0;
  background: #000;
  overflow: hidden;
  min-height: 100vh;
}

#redball {
  background: red;
  width: 30vmin;
  height: 30vmin;
  border-radius: 50%;
}
 

我用vmin單位 ，使得元件始終保持對稱，同時響應視口的大小。

在CSS中，從頁面的一側移動球向對方會需要像下面這樣：

 @keyframes moveBall {
  from {
    transform: translateX(-20vw);
  }
  to {
    transform: translateX(100vw);
  }
}
 

該動畫將從聲明紅球元素被稱為：

 #redball { 
  animation: moveBall 3s infinite;
}
 

結果，在Codepen所示：

見筆基本CSS紅球動畫由SitePoint（ @SitePoint上） CodePen 。

有幾件事情需要注意的動畫在這一點上，包括一個事實，即寬松政策（在開始加速，并在年底放緩）自動內置的。

輸入Web動畫API

保持HTML和最初的風格，讓我們刪除CSS動畫，并替換使用Web動畫API來完成同樣的事情的JavaScript：

 var moveBall = document.getElementById('redball').animate([{
  transform: 'translateX(-20vw)'
}, {
  transform: 'translateX(100vw)'
}], {
  duration: 3000,
  iterations: Infinity,
  easing: 'ease'
});
 

你可以看到，動畫采用了許多相同的語法如CSS，但其表示為與代表關鍵幀的數組的對象。 我們沒有明確聲明to或from在關鍵幀-的JavaScript會自動均勻地分布在關鍵幀對我們來說，雖然聲明也完全有可能。

動畫不能播放還沒有; 就像在CSS，我們叫它：

 moveBall.play();
 

語法的關鍵幀部分將成為即使在未來的瀏覽器更容易，因為CSS的方面變換語法以前值成為可用的屬性 ：

 translateX: -20vw;
 

這種變化的規范是在Chrome Canary版已經上市，但它是一兩年的新語法是在所有現代瀏覽器可用之前。

還有一些其他的事情需要注意的腳本：

• 的JavaScript需要動畫定時以毫秒為單位，而不是標準的CSS秒（毫秒也是CSS可用，只要ms被后綴的定時值）。
• 在Web動畫API指定為迭代次數iterations ，而不是的CSS屬性interation-count （當它被單獨定義的）; 關鍵字是Infinity的重復次數，而不是CSS的（大寫I） infinite 。
• 在Web動畫API默認寬松是linear ，所以在我們的演示中，我們指定ease對CSS動畫的默認值。

其結果是功能上等同于CSS動畫。

見筆堿性紅球動畫在網頁動畫的API由SitePoint（ @SitePoint上） CodePen 。

當然，復制一個CSS動畫像這樣在JavaScript中并沒有真正使用腳本語言接近其最大能力的活力; 證明，我們將創建一個功能更全面得多的動畫。

圖像處理

前一段時間我在創建一個動畫處理的一系列圖像到網頁，像甩撲克牌在臺上很有意思。 寫個人的動畫在傳統的CSS每張卡要花費的大量時間，并會一直發表了相同的結果。 相反，我使用的Web動畫API作為工作的完美工具。

漸進式卡

我們希望圖像而不管的JavaScript或Web動畫API是否啟用或不可見，所以我們加入了一系列圖像到頁面的開始：

 <div class="shuffle expose">
  <img src="bridgefog.jpg" alt>
  <img src="daisyface.jpg" alt>
  <img src="drowninghand.jpg" alt>
  <img src="firefigure.jpg" alt>
  <img src="shellhand.jpg" alt>
  <img src="waterfeet.jpg" alt>
</div>
 

我已經離開了alt空白，以保持代碼的清晰圖像的值; 在量產版，他們將充滿了描述。 這些照片是由.tafo。 ，下使用署名-禁止演繹2.0通用許可證 。

我們可以添加少量CSS與動畫帶來的圖像，如果無JavaScript的條件仍然為真：

 @keyframes reveal {
  to {
    opacity: 1;
  }
}
.shuffle {
  min-height: 100vh;
  position: relative;
}
.shuffle img {
  width: 33%;
  opacity: 0;
}
.expose img {
  animation: reveal 1s forwards;
}
 

個人形象傳遞可以用延遲：

 .expose img:nth-child(1) { animation-delay: 1s; }
.expose img:nth-child(2) { animation-delay: 2s; }
.expose img:nth-child(3) { animation-delay: 3s; }
…
 

當然，這些聲明可以與薩斯或其他預處理程序自動完成。

這些圖像將有一個邊界，如果父元素有一個class的webanim ，這將JavaScript的應用：

 div.webanim img {
  border: 1.4vw solid #eee;
}
 

JavaScript的

我們將添加腳本到頁面的結束。 我需要幾個隨機值的動畫，所以我會創建一個函數來生產這些：

 function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}
 

然后我會收集圖像容器和它們內部的所有影像，與設置的遞增器變量一起：

 var imgContainer = document.querySelector(".expose"),
    imgSeq = document.querySelectorAll(".shuffle img"),
    i = 1;
 

然后，我就刪除expose在不透明類（離開圖像0和動畫的（因為如果容器有CSS動畫只能一個expose類：

 imgContainer.classList.remove("expose");
imgContainer.classList.add("webanim");
 

該webanim類將圖像帶有邊框。

腳本的大部分發生在forEach函數內部循環。 我會打電話的功能，一旦我放心，所有的圖像數據被加載（而不是在DOM僅僅表現在圖像節點）使用的優秀imagesLoaded由大衛DeSandro腳本 ：

 function racknstack() {
  Array.prototype.forEach.call(imgSeq, function(photo) {
    setTimeout(function() {
      photo.style.position = "absolute";
      photo.style.width = getRandom(33, 45) + "%";
      photo.style.left = getRandom(-5, 65) + "%";
      photo.style.top = getRandom(-6, 60) + "vh";
      var animate = photo.animate([{
        opacity: '0',
        transform: 'rotate(' + getRandom(-12, 12) + 'deg) scale(1.2)',
        boxShadow: '0 0 12px 12px rgba(0,0,0,.3)'
      }, {
        opacity: '1',
        transform: 'rotate(' + getRandom(-8, 8) + 'deg)',
        boxShadow: '0 0 6px 6px rgba(0,0,0,.3)'
      }], {
        duration: 2000,
        fill: 'forwards'
      });
    }, 1800 * i)
    i++;
  })
}
 

一如以往，我們必須調用函數要開始做事了：

 imagesLoaded(imgSeq, racknstack);
 

結果：

見筆隨機堆積圖像W / WebAnim API和逐行JS由SitePoint（ @SitePoint上） CodePen 。

反過來，功能：

• 設置每個圖像的絕對位置;
• 產生用于圖像的隨機寬度（以百分比，因此圖像仍然是流體和響應）
• 產生用于圖像的隨機位置（包括可能的負位置，這意味著它可以稍微出現斷視口的邊緣）
• 動畫使用Web動畫API的照片。 關鍵幀淡入從圖像0至固體不透明度，同時旋轉該圖像

的forwards ，因為我們想要的圖片留在自己的國家到底在完成動畫后填充是必要的。

不斷壯大

在Web動畫API開發進程的加速：

• 在目前的工作草案正在興建穩步推進，與越來越多的Chrome和Firefox支持的組件。
• 有一位優秀的，免費的Dependance， 填充工具 ，可以簡單地投進頁提供尚未實施的規范瀏覽器的支持。
• 沒有人一直在支持的規格比雷切爾納伯斯，誰擁有一支優秀的可能性，更多的公共或聲音在Mozilla開發者博客介紹話題與一起幾個會議演講和一套CodePen演示你探索。 這里有一個她在規范工作的概述 。

結論

正如你所看到的，網絡動畫API允許我們從具體的移動，聲明，一步一步自然CSS動畫的動態，JavaScript的勢在必行的做法，允許表現，隨機的，高性能的動畫。

我很想看到Web動畫API在你的探索，特別是在生產基地：讓我知道在下面的評論！

From: https://www.sitepoint.com//bringing-pages-to-life-web-animations-api/