Ad Network

あわせて読みたい

  • あわせて読みたい

« 「Flash vs. HTML5」という構図がはっきりと見え始めたぞ、と | Main | DellのAndroidケータイが意味するもの »

HTML5入門:アニメーションの実装方法3種

 HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。

 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。

 今日作ったのは、HTML5+CSS3上で可能になる(ただし現在ではWebkit独自の拡張を含む)3つのアニメーション・テクニックの比較(左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ(ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか?))。

 詳しくはソース(参照)を見ていただければ分かると思うが(MITライセンス)、簡単に解説するとこんな感じになる。

1. DOM Animation

 HTML ElementをJavascriptからDOM操作で位置(style.top)を動かす手法。HTML4でアニメーションを実現しようとしたらこの方法しかなかった。DOMの操作でアニメーションを実現するため、デバイスの能力やブラウザーの実装のされかたによっては、全フレームを描画してもらえない場合があり(DOMに変更をほどこしても、ブラウザーは画面への反映を非同期に行う点に注目)、アニメーションが多少カクカクすることがあるので要注意。

2. CSS Animation

 これはWebkitが先んじて実装した、transition (現時点では -webkit-transition)というスタイルを使って行うアニメーション(だから現時点ではWebkitベースのブラウザーでしか動かない)。DOMの操作は最初にトリガーとなるスタイルの変更(この場合は"bottom"というクラス属性を付けることで実現)を一度だけすれば、残りはブラウザーがしてくれる。JavaScriptをごりごりと走らせる必要はないのでCPUへの負荷は他のものより低いが、ゲームなどによくある「衝突判定」などができないので、メニューをプルダウンするなどの固定的なアニメーションの実装に適している。

3. Canvas Animation

 これがAppleがSafariで先に実装し、IE以外のほぼすべてのブラウザーに採用されている<canvas>タグを使ったアニメーション。DOMを一切操作しないが、1フレームごとにJavaScriptで再描画するため、CPUへの負荷は重い。ただし、DOM Animationと異なって描画のタイミングを自分でコントロールできるため、iPhoneのようなCPUの力がそれほどない場合、DOM Animationよりも一般的に見た目がスムーズになる。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef0120a5c87a83970b

Listed below are links to weblogs that reference HTML5入門:アニメーションの実装方法3種:

Comments

Hori

リンク先が無効になっていてみえません。

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.