SINAPの柿内です。

最近よくJavaScriptで作りこまれたUIを目にします。
少し前では考えられなかったリッチなUIがHTMLとJavaScriptで動いていたりすると、「え！これFlashじゃないの！！」と驚く事もしばしばです。

FlashのファイルをHTML+JavaScriptに変換するサービスなんかもでてきたりして、時代の流れを感じずにはいられません。

そんな状況のなかでHTML5で実装されたCanvas要素。いままで、絵を描画するという機能はFlashにしか無かった機能ですが、HTMLでもCanvas要素が実装され、JavaScriptと組み合わせる事でその名のとおり真っ白なキャンバスに絵を描くことができるようになりました。

そこで今回はデモとして、Flashのアニメーションとほとんど同じロジックで動くHTML Canvas(+JavaScript)のアニメーションを作成しました。
下に表示されているアニメーションですが、どっちがHTML Canvasか皆さんわかるでしょうか。

もう一度再生　※ HTML5対応ブラウザでご覧ください。

わかりましたか？

要素の上で右クリックしてもらえれば分ると思いますが、左側がcanvas要素で右側がFlashです。

実行結果はほぼ同じです。速度も並べて処理させればどちらが明らかに速いということはありません。同じwindowの中で実行されるので、片方の処理がボトルネックになっているのかもしれませしれませんが、それほど差はないようです。

ただ、Canvas要素のx,y値の最低単位は1pxで、Flashの最低単位より大きいので、跳ね返りの処理の誤差が大きく、丸い玉のバウンドの収束がFlashより早く終わってしまいます。

今回はごく簡単なアニメーションのサンプルですのでFlashと変わらない結果となりましたが、実際にはオブジェクトに対するマウスアクションがとれなかったり、衝突判定がとれなかったりなど、Flashにごく当たり前に存在するメソッドが無いのでインタラクティブな物を作り込むには技術的な限界や工数の問題が発生しそうです。そもそも、アニメーションを実現するための要素では無いといえばそうかもしれません。

しかし、iPhone上でちょっとしたアニメーションをする位なら十分つかえます。なにより、表現方法、表現の場所が増えるのはクリエイターにとって決してネガティブなことではないですね。

今度はもうちょっとインタラクティブ性のあるものを作っていきたいので、できたらまたこちらで発表します。