スマートフォンでのアニメーション描画
ソーシャルアプリをmixi上で展開するとなると、何らからの形でFlashアニメーションの代替が必要になってくるのではないでしょうか。
例えば怪盗ロワイヤルのレベルアップアニメーションとか。
今回はそれらの代替手段を考えてみます。
Flash
ジョブズ閣下はお怒りなので、iPhoneではまず今後も対応しないでしょ。Androidも現状未対応なので却下。
アニメーションGIF
今でもモバイルでは結構使ってる。間違いなく堅実な方法。ただ、1コマの容量×コマ数と言えるほど圧縮率は低い。キャッシュを活用できれば有効。
Canvas
html5の新技術。iPhone・XPERIA共に対応。ベクターデータを扱えるので拡大・縮小をしても劣化をしない。しかしアニメーションの規格として制定されたわけではないので、コマごとにすべてを再描画しなおす必要があり、正直iPhoneのスペックではアニメーションは難しい。保留。
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に期待!