スマートフォンでのアニメーション描画

ソーシャルアプリをmixi上で展開するとなると、何らからの形でFlashアニメーションの代替が必要になってくるのではないでしょうか。

例えば怪盗ロワイヤルのレベルアップアニメーションとか。
今回はそれらの代替手段を考えてみます。

Flash

ジョブズ閣下はお怒りなのでiPhoneではまず今後も対応しないでしょ。Androidも現状未対応なので却下。

アニメーションGIF

今でもモバイルでは結構使ってる。間違いなく堅実な方法。ただ、1コマの容量×コマ数と言えるほど圧縮率は低い。キャッシュを活用できれば有効。

アニメーションpng

マイナーだが、実はpngの画質でアニメーションができます。アルファチャンネルにも対応。
けど現状はFirefoxのみ対応。却下。

Canvas

html5の新技術。iPhoneXPERIA共に対応。ベクターデータを扱えるので拡大・縮小をしても劣化をしない。しかしアニメーションの規格として制定されたわけではないので、コマごとにすべてを再描画しなおす必要があり、正直iPhoneのスペックではアニメーションは難しい。保留。

SVG

SMILと呼ばれるアニメーション規格あり。XMLベースのファイルのためサーバーサイドでの動的な書き換えも可能。ただ、新たに覚える規格としては障壁高そう(未確認)保留。

html5 video

html5のvideo規格。動画をjsで操作可能。
しかしXPERIAが非対応な上に、iPhoneもページ上でのインライン再生はできずQuickTimeが立ち上がるオマヌケ仕様。動画コンテンツ以外は却下。

css3 Transitions / Animations

css3ではアニメーション機能が追加され、htmlで定義された要素をcssで表現できる範囲でアニメーションさせることができる。内容によってはかなり有効。でもレベルアップ表示とかは表現力不足か。保留よりの有効。

画像の切り替え

とても原始的な発想だが、コマごとの画像を全て書き出しておき、jsで切り替えていく。
Appleのhtml5デモでもこの手法が使われている。当然コマ数を追うごとに重くなっていくがキャッシュを活用できれば有効。


こうなるとアニメーションGIF/css3 Transitions / Animations/画像の切り替えあたりが無難な線でしょうか。
通常の要素の変形(拡大/縮小・回転・移動・湾曲・反転)でできる範囲のものは、間違いなくcss3を用いるのが一番軽いです。
それ以外のものはFlashで作ってアニメーションGIFで書き出し、かな。


決定打にかけますね。個人的には今後のhtml5 videoに期待!