ひと言にWebアニメーションと言っても、それを実現するための技術は千差万別です。そこで、現場で使われるWebアニメーション技術の特徴と実装方法を、ざっと紹介していきたいと思います。

DOMアニメーション

DOMアニメーションとは、一番基本的なアニメーションの実装方法です。HTML5が誕生する以前からJavaScriptで実装されてきた手法で、HTML5が注目されるとともに、Web標準に準拠した手法として、再び利用される機会が多くなってきました。HTMLDOM要素のStyle属性に変化を加えて行うアニメーションで、IE6といったWeb標準への準拠が十分でないレガシーブラウザでも再現可能です。

この方法でアニメーションをつけるためには、JavaScriptを使い、setInterval関数やrequestAnimationFrame関数で処理をループさせながらStyle属性を変更していくように実装する必要があります。

CSS3アニメーション

CSS3アニメーションとは、CSS3で新たに定義されたCSS TransitionCSS Animationを利用したアニメーション手法です。DOMアニメーションなどの他のアニメーションとは異なり、JavaScriptを使用しなくても、CSSだけでアニメーションを実装することができます。CSS Transitionを使ったCSS3アニメーションの実装方法を例にあげると、以下のように、CSSプロパティとしてtransitionを追加するだけです。

アニメーションの実行タイミングをCSSの疑似クラス以外で定義する場合は、CSSでtransition用のクラスを設定しておいて、そのクラスを、JavaScriptを使って、任意のタイミングで要素に追加することで、アニメーションが再現されます。

Canvasアニメーション

HTML5で新たに追加されたCanvas要素を使ったアニメーションで、JavaScriptを使ってCanvas要素に描画していく手法です。HTMLに縛られない自由な配置が可能で、Flashの代替としてよく例えられることがあります。ですが、あくまでCanvas要素は描画機能しか有していないので、アニメーションを実装するためには、そのためのJavaScriptを記述する必要があります。

Canvasアニメーションライブラリ「CreateJS」

「CreateJS」はAdobeが力を入れているCanvasアニメーションライブラリで、ActionScriptのようなインターフェースを持っています。前述したようにCanvas要素は、描画機能しか有していませんので、インタラクション性や、アニメーション演出を実現するためには、「CreateJS」のようなJavaScriptライブラリを使うのが好ましいです。

SVGアニメーション

SVGアニメーションは、SVG要素というベクターグラフィックスを使ったアニメーションで、DOMアニメーション、Canvasアニメーション同様に、JavaScriptを使ってアニメーションを再現します。 SVGの歴史はFlashよりも古く存在していましたが、仕様が固まらないまま、長年Flashの陰に隠れてきましたが、HTML5が注目されるつれて、ベクターグラフィックスを扱える要素として注目を集めてきました。 ベクター画像特有の美しさと滑らかな動きで、ファイルサイズが小さいという特徴があります。

SVGアニメーションライブラリ「SnapSVG」

「SnapSVG」はAdobeがSVGアニメーション用のライブラリとして開発しています。SVGアニメーションは、自力で実装するとなると、煩雑なDOM操作が要求され、コード量が多くなってしまいます。これを効率的に実装するためには、やはりライブラリは必要不可欠かもしれません。

SVGを使ってデータを可視化するライブラリ「D3.js」

SVG操作のためのライブラリかというと目的が違いますが、「D3.js」はデータを可視化することを目的としています。可視化するためにSVG要素を利用します。

WebGLアニメーション

WebGLアニメーションは、ブラウザで3Dグラフィックを表示させるためのAPIであるWebGLを使って、HTML5Canvas要素に描画していきます。WebGLは高度な技術ですが、そのAPIは低レベルなもので提供されているので、そのまま使うには非常に冗長な記述を要求されてしまいます。「three.js」などのライブラリを使うことで、高度なWebGLの技術を、簡易に利用することができるようになります。

WebGLを使って3Dグラフィックを表示するライブラリ「three.js」

まとめ

Web標準技術を用いたWebアニメーションは、今回紹介したように選択肢が多いものです。それぞれメリット・デメリットがあり、選択を誤ると痛い目にあいます。また、それらを扱うライブラリにもはやり廃りがあり、変化が目まぐるしい状態です。アニメーション演出に凝ったサイトを作るには、これらを必要に応じてうまく使いこなしていく必要があります。