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

サム・ソログッド

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

背景

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

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

このメソッドはすべての最新のブラウザでサポートされており、優れたポリフィル フォールバックが用意されています（詳しくは後ほど）。このメソッドとそのプレーヤー オブジェクトのネイティブ サポートは、Chrome 39 で幅広く利用できるようになりました。 Opera でもネイティブに利用可能で、Firefox 向けに積極的に開発中です。 これは、ツールボックスとして活用できる強力なプリミティブです。

Codelabs

Web Animations API で利用可能な Codelab は現在も増え続けています。これらは、API のさまざまなコンセプトを説明するセルフペース ガイドです。これらの Codelab のほとんどでは、静的コンテンツを取得し、アニメーション エフェクトで補正します。

ウェブ アニメーションで使用できる新しいプリミティブを理解するには、こちらの Codelab と関連リンクやリソースをご覧ください。どのようなアプリを作成できるかについては、Android からヒントを得た「表示効果」をご覧ください。

Codelab の結果のプレビュー

これから始めようとしている方は、ぜひご検討ください。

デモ

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

デモでは、色鮮やかな回転銀河や回転する地球、さらには単純に古い要素へのさまざまなエフェクトを使用しています。

ポリフィル

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

もっと試してみたい場合は、web-animations-next ポリフィルを使用できます。これには、コンポーザブル GroupEffect および SequenceEffect コンストラクタなど、未完成の機能も含まれます。2 つのポリフィルの比較については、ホームページをご覧ください。

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

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

  2. 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 のドキュメントをご覧ください。