互換性抜群！「Web Animations API」の基本をおさらいしよう

更新日: 2018年05月29日

プログラミング

ホームページ上で何らかのアニメーションを実行しようとするときには、どのような技術を使ってアニメーションを作ればいいのか悩みます。
というのも、アニメーションを実装するのに、CSSアニメーションやCSSトランジション、HTML5のCanvas、SVGアニメーション、GIFアニメーション、JavaScriptでDOM操作をすることで実装するアニメーションなど、さまざまなものがあります。

しかしながら、決定版とも言える新しいアニメーションフレームワークとなるJavaScriptのAPIの策定が、W3Cで進んでいます。
それが、今回ご紹介する*「Web Animations API」*です。

通常、スクリプトを使ってアニメーションを実装する際には、いざ作ろうとしてみると、サポートブラウザの問題やデバイス間での見え方の違いなどで、考慮すべき点がいろいろ多いのが現実です。
しかし、このWeb Animations APIはまだ草案段階(Working Draft)ではあるものの、対応範囲は次々に広がっており、ブラウザ側で標準的な仕組みを用意してくれるので、非常に便利です。

それでは、このWeb Animations APIとは一体どのようなもので、他のアニメーションフレームワークとは何が違うのでしょうか。
今回は、Web Animations APIの基本について、概要から基本的な考え方までをご紹介します。

Web Animationsが生まれた経緯

インターネットが広く一般に普及し、誰もがスマートフォンを持ち歩くような時代になり、ユーザーの目を引くアニメーション表現はWeb環境において必須の技術となりました。
しかし、その実装方法にはこれまで統一的な手段がほとんどなく、ホームページの製作者はそれぞれに工夫を凝らしながらアニメーションを手作りしていました。
その結果、アニメーションに特化したJavaScriptライブラリが続々とリリースされ、やがて乱立することとなり、それぞれのライブラリ同士の互換性や相性の問題が、製作者の悩みとなっています。

ブラウザーベンダーの側でもこの状況を問題視しており、実際にWeb環境下でアニメーションを実装するための統一した手段の仕様を検討していました。
実際に、CSSにおいてはすでにアニメーション関連の技術は確立されつつあります。

一方で、HTML5では、広範な仕組みを外部から取り込んだことで、さまざまな弊害が生まれました。
例えば、SVGの仕組みがそれにあたります。

HTMLではSVGの機能(transformやfilterなど)をこれまでもHTML向けに再定義してきた定義がありますが、HTML5では、SVGそのものを仕様として取り込んでしまったため、同じ仕様がダブってしまうことになり、全体としての整合性が乱れてしまいました。

そういう経緯があり、Webの仕様を定義する団体であるW3Cでは現在、HTMLにおけるCSSやSVGの仕様を一度バラバラにしつつ、これらの仕様を包括する*リファクタリング(統一的な仕様への再構築化)*に取り組んでいます。
こうした流れに従い、Webアニメーションの仕様も、一度新たにWeb Animationsとして再構築・再定義されることになったのです。
W3Cが中心的に策定を進めていることもあり、最終的にはアニメーションを取り巻く問題を解決し、Web Animationsに統合していきたいという方向性で動いています。

対応状況については、基本的なコンポーネント(コアコンポーネント)はすでにChromeやFirefoxではサポートされており、現在ではSafariやEdgeでも開発中です。
また、対応していないブラウザでも同じように実装できるように*「ポリフィル」と呼ばれる外部JavaScriptプラグイン*も提供されているので、非対応ブラウザでもポリフィルを読み込むことでクロスブラウザ・クロスデバイス対応のアニメーションを実装することができます。

Web Animationsの基本的な考え方

Web Animationsでは、CSSアニメーションと同じように*キーフレーム(アニメーションの進捗を実際のグラフィックに適用する際の枠組み)*を定めることでオブジェクトを変形したり動かしたりすることができます。
あとは、ブラウザの側でWeb Animationsの仕様に基づきキーフレーム間をトゥイーン(自動補正)します。
例えば、色が「赤から黄色に変わる」というアニメーションであれば、タイミングから算出されたアニメーションの進捗に応じた色(50％であればオレンジ色)でグラフィックを描くことになります。

上記の例で言えば、CSSアニメーションのキーフレームは以下のようになります。

@keyframes changeColor {
　　from {
　　　　background-color: red;
　　} to {        
　　　　background-color: yellow;
　　}
}

このキーフレームの設定では、from(0%)に「background-color: red;」、to(100%)に「background-color: yellow;」を設定しており、それを直線的に動かしていることになります。

これをWeb Animations APIを使ってJavaScriptに置き換えると、以下のようになります。

var changeColor = document.getElementById(‘box’).animate([{
　　backgroundColor: ‘red’;
}, {
　　backgroundColor: ‘yellow’;
}], {
　　duration: 3000,
　　iterations: Infinity,
　　easing: ’linear’
});

基本的な構造はCSSアニメーションで組み立てるときと同じですが、キーフレームを指定する代わりに配列を組んだオブジェクトとして表現しています。
fromやtoを宣言する必要はなく、JavaScript側でキーフレームを割り当てます。

しかし、この時点ではアニメーションは再生されません。
以下のように呼び出すことで、再生が行われます。

changeColor.play();

Web Animations APIはCSSではなくJavaScriptベースで動いているため、random関数などJavaScriptでサポートされている関数を組み合わせてアニメーションを作成したり、DOM操作で直接HTML要素を変形・移動させることも可能です。

また、Web Animations APIでは、SVGを使ったアニメーションもサポートしています(Chrome環境でのみ作動します)。

<svg id=“box”><path fill="red" d="M30,100L100,30L170,100L100,170z" class="target"/></svg>

var target = document.getElementById(‘box’).animate([ d:{
　　"path('M30,100L100,30L170,100L100,170z')", 
　　"path('M40,40L160,40L160,160L40,160z')", 
　　"path('M100,30L170,100L100,170L30,100z')"
}], {
　　duration: 2000,
　　iterations: 2
});

以上により、3種類のフレームをセットしながら、なめらかに変形するSVGアニメーションが完成します。

このように、SVGアニメーションを作成する際に、コマとなるPathが分かって入れば、Web Animationsのanimate関数内でそのコマをつなぎ合わせることで、動きのある複雑なSVGアニメーションを実装することも可能です。

Web Animations APIを活用しよう

Web Animations APIをうまく使えば、オンボーディングしやすいマイクロインタラクティブアニメーションも実装しやすくなります。

例えば、決済プラットフォームのStripeでは、Web Animations APIを大いに使ってぬるぬると動くUIアニメーションを実装しています。
Web Animations APIでは、CSSでもサポートしているようなeasing処理をそのまま使うことができるため、非常に便利です。
Stripeの例では、cubic-bezierというeasingを使って、フォームが入力後にスライディングするようなアニメーションになっています。

まとめ

Web Animations APIの登場により、たくさん乱立していた膨大な量のJavaScriptプラグインの中から一つを選んでダウンロードし、そのプラグインのことを勉強してアニメーションを作成するということがなくなり、ますますアニメーションを使った開発が行いやすくなります。
また、Web Animations APIはいま注目を集めているSVGを使ったアニメーションもサポートしているため、学ぶ価値は大いにあります。

今回は基本事項しか解説をすることはできませんでしたが、より詳しく知りたい方は、下記の参考ページを合わせてご覧ください。

参考：
Web Animations APIの基本的な使い方・まとめ