1_4 Webで見られるアニメーションの種類

Webで見られるアニメーションを、使用される技術の観点からいうと、HTML5の現在、次の5つに分けられます。

  1. JavaScriptによるDOM操作
  2. CSSアニメーション
  3. <canvas>要素のアニメーション
  4. SVGアニメーション
  5. WebGLアニメーション

1つめの、JavaScriptによるDOM操作は、HTML要素のstyleプロパティをJavaScriptから操作して、位置や色を変える方法です。そのためには、JavaScriptのsetInterval()やrequestAnimationFrame()などの関数を使って、1秒間に60回、CSSプロパティのtopやleft、colorなどの値を変更します。またjQueryやGreenSockといったJavaScriptライブラリを使ったアニメーション表現もここに含まれます。

2つめのCSSアニメーションは、CSS3で追加されたCSS AnimationsやCSS Transitionsを使った方法です。JavaScriptは必要ありませんが、使った方がより細かな制御が行えます。

3つめの<canvas>要素のアニメーションは、HTML5で追加された<canvas>要素の世界の中でアニメーションを描画する方法です。キャンバスのイメージ世界には、JavaScriptを使ってアクセスします。

4つめのSVGアニメーションは、以前から存在したものの、仕様の不統一により普及が進まなかった<svg>要素を使った方法です。HTML5の現在、<svg>要素は、軽量なベクターグラフィックが表現できる要素として注目されていますが、アニメーションの手法としては、かなり特異です。

5つめのWebGLアニメーションは。3DCGがWebブラウザで表現できる方法で、JavaScriptを駆使して挑みます。実際の操作はかなり難解ですが、three.jsというJavaScriptライブラリを利用すると、難解な崖は少し緩やかになります。

以前はFlashのSWFアニメーションや、DirectorのShockwave、Shockwave3Dアニメーションなどがありましたが、今ではすたれてしまいました。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA