このページは Cloud Translation API によって翻訳されました。

ウェブアニメーションのリソース

Sam Thorogood

Web Animations API は、JavaScript から命令型アニメーションを記述するための強力なプリミティブを提供しますが、これは何を意味するのでしょうか。Google のデモや Codelab など、利用可能なリソースを確認する。

背景情報

API の中核には、Element.animate() メソッドがあります。背景色を赤から緑にアニメーション化する例を見てみましょう。

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

この方法は、すべての最新ブラウザでサポートされていますが、優れたポリフィルフォールバックがあります（詳細は後述）。このメソッドとそのプレーヤーオブジェクトのネイティブサポートは、Chrome 39 で広く利用できるようになりました。 Opera でもネイティブで利用可能で、Firefox 向けに開発が盛んに行われています。これは強力なプリミティブであり、ツールボックスに入れておく価値があります。

Codelab

Web Animations API で利用できる Codelab は増え続けています。これらは、API のさまざまなコンセプトを説明するセルフペースガイドです。これらの Codelab のほとんどでは、静的コンテンツをアニメーション効果で加工します。

ウェブアニメーションで使用できる新しいプリミティブについて理解したい場合は、こちらの Codelab と関連リンクやリソースをご覧ください。作成するアプリのアイデアについては、Android にヒントを得たこの出現エフェクトをご覧ください。

これから始めるという方は、ぜひご活用ください。

デモ

アイデアをお探しの場合は、マテリアルから着想を得たウェブアニメーションのデモをご覧ください。ソースは GitHub でホストされているので、こちらもご覧ください。さまざまな効果を実感できるだけでなく、各デモのソースコードをインラインで確認できます。

デモでは、色とりどりの回転する銀河や回転する地球のほか、昔懐かしい要素にさまざまなエフェクトを応用しています。

ポリフィル

すべての最新のブラウザで優れたサポートを実現するには、ポリフィルライブラリを使用します。Web Animations API には、現在利用できるポリフィルがあり、Internet Explorer、Firefox、Safari などのすべての最新ブラウザで利用できます。

試してみたい場合は、web-Animations-next ポリフィルを使用できます。これには、コンポーズ可能な GroupEffect や SequenceEffect コンストラクタなど、まだファイナライズされていない機能も含まれています。2 つのポリフィルの比較については、ホームページをご覧ください。

いずれかのコードでポリフィルを使用するには、いくつかの方法があります。

cdnjs、jsDelivr などの CDN を使用するか、rawgit.com で特定のリリースをターゲットにする

NPM または Bower からインストールする

 $ npm install web-animations-js
 $ bower install web-animations-js
 ```

いずれの場合も、スクリプトタグにポリフィルを含めるだけで、他のコードよりも前に

<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
    document.body.animate([
    {'background': 'red'},
    {'background': 'green'}
    ], 1000);
</script>

その他のリソース

技術的な概要については、W3C の仕様をご覧ください。

Dan Wilson 氏はまた、新しい CSS motion-path プロパティと併用する方法など、ウェブアニメーションに関する多くの投稿を執筆されています。 motion-path を使用する例については、Eric Willigers のドキュメントをご覧ください。