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