ホームページ上で何らかのアニメーションを実行しようとするときには、どのような技術を使ってアニメーションを作ればいいのか悩みます。
というのも、アニメーションを実装するのに、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が生まれた経緯

code.jpeg

インターネットが広く一般に普及し、誰もがスマートフォンを持ち歩くような時代になり、ユーザーの目を引くアニメーション表現は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プラグイン*も提供されているので、非対応ブラウザでもポリフィルを読み込むことでクロスブラウザ・クロスデバイス対応のアニメーションを実装することができます。