ちょっと気になって、FlashCS6のHTML書出しとEdgeのHTML書出しを比べてみました。
FlashCS6の書出し
デモ:FlashCS6でのアニメーション
FlashCS6は基本的に<canvas>に書きだされるようです。
これはFlashの一番キモなきのうとしてのアニメーションツールとしての表現に依存してそうです。
シェイプトゥイーンや、細かな表現はやはりCanvasのパスを使った方が綺麗に出せるからなのかなぁと感じました。
書出しエクステンションのCreateJS自体がCanvasベースなのもあると思いますが、やはりFlashとしては、
アニメーションの制作ツールとして非常に秀逸な機能を持っていると思うので、Flashで使える表現をなるべく
維持できる<canvas>を使用しているCreateJSを公認の書出しツールとして選んだのかと思いました。
Edgeの書出し
デモ:Edgeでのアニメーション
一方Edgeのアニメーションは、<div>タグが使われています。
これは<canvas>タグを使った場合に表示領域が大きくなった場合のパフォーマンスが落ちてくる事を懸念して、
<div>タグにしているのでは?とおもいました。
<canvas>での表現ではパフォーマンスが悪い、条件が良くないなどのケースで使い分けになって行きそうな気がします。
SenchaAnimator
デモ:SenchaAnimatorでのアニメーション
AdobeのEdgeに先駆けてリリースされているSenchaAnimatorも見てみると<div>タグベースのようです。
enchant.js
デモ:enchant.jsでのゲーム
ActionScriptライクなプログラミングが出来るenchant.jsもdivタグがベースになっているようです。
divタグベースでアニメーションさせた方がパフォーマンスがいいのかな?と想像。
まとめ
今後もどんどんこの手のツールは出てきそうなので、それぞれの特性(canvas,div,またSVGなど)をよくよく理解して、
使い分けて良く必要がありそうです。
コメントを残す