スマートフォンのブラウザでのアニメーションに関するツールのメモ
生成するhtmlコードに関する部分が中心。
まだ修正・追記をする予定。Adobe Edgeを追加予定。
- [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正]
Swiffy v3.6
Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScript2まで対応。
Google Lab廃止から生き残ったし、アップデートもされているので、Googleも力を入れている模様。
生成するhtmlコード
- Flashの変換結果として大量のjsonデータが出力され、それがランタイム(runtime.js)によって実行される。
- Flashのアニメーションのオブジェクトの移動は、SVGのtransform属性のmatrixに変換している。相当重くiPhone4ではシンプルなコンテンツでないと厳しい。
- ベクタ画像はSVGに変換される
- javascriptの処理をFlashのaction scriptから呼び出したい場合、変換前のFlashでgetURL("javascript:void(alert('neko'))")などとする。下記のサイトを参考。
- hi-posi ≫ Blog Archive ≫ Swiffyを調べてみた。
- 画像はdataスキームに変更される。ゲームなどで画像を動的に入れ替えたい場合、名前などで適当に検索して見つけて入れ替えるスクリプトを追加する。
- SVGなのでAndroid2.xでは動かない。
Wallaby Technical Preview
Flash(fla)をhtml5を使ったコンテンツに変換できるAdobeのアプリケーション。
Swiffyとは異なりActionScriptには対応していない。
生成するhtmlコード
- シンプルなコード。javascriptで個々のアニメーションを記述せず、CSS Animation/CSS Transitionで書かれたアニメーションを、クラス変更で開始させる。
- 変形はwebkit-transformのmatrix(), scale()を利用。
- Swiffyと同じく、ベクタ画像はSVGに変換される
- jqueryが使われている。当然animate()関数ではなくセレクタの機能などの部分。
- webkitAnimationEndを契機に次の処理へと進めている。
- Swiffyのjsonの塊より生成されたコードがわかりやすいので、特定要素のクリックでのページ移動などのインタラクションを生成コードに追加するのはできそう。ただし、アニメーション動作の変更に介入するのはさすがに難しい。
Reel, ExGame
ReelはグリーのFlash(swf)のjavascriptランタイム。
ExGameはDeNAのFlash(swf)のjavascriptランタイム。
Sencha Animator1.0
CSS Transistion/CSS Animationを利用したアニメーション作成ツール。Adobe Flash Professionalに近い位置づけ。
ユーザーインタラクションも対応している。
アニメーションと簡単なインタラクティブクコンテンツの作成に利用できるが、スクリプトからの操作するIFがほとんどない現状ではゲーム作成などは難しい。
生成するhtmlコード
- シンプルなコード。Wallabyと同じで、javascriptで個々のアニメーションを記述せず、CSS Animation/CSS Transitionで書かれたアニメーションを、クラス変更で開始させる。
- 高速化のため、2Dの移動・変改でもtranslate3d(), scale3d()を利用している。
- 円などはdivでborder-radiusを指定している。
- 画像のプリロードの機能はないが、assets()フォルダの画像を一覧にして読み込むjsをビルドプロセスで追加するのは可能なので致命的にはならない。
- imgはdivで2回囲んでいる。1回はCSSの適応プロパティの他のオブジェクトと合わせるためと思うけど、2回でくるむ理由はなんだろう。
- 連続する動作をCSS Transitionで分けずにCSS Animationにしている。transitionEndで一瞬時に止まるのを気にしていると推測。timerでCSS Transitionを加えると微妙なタイミングに合成されちゃうし。
- 動かない状況もtimerで待たずに、css animationのtranslate()で同じ位置を記述している。
- アニメーションしながらのサイズ変更には2種類指定できる。
- How to resize an image [アーカイブ] - Sencha Forum
- resize
- width/heigthをCSS Animationで変更する。子孫は変更されない(イメージはimgをdivでラップしているので変更されない)
- scale()より遅いwidth/heightの変更を使うのは、下記のscale() + translate()のAndroidバグを避けるため?
- Issue 12451 - android - Using css transitions in webkit clears scale() transforms on non-animated objects for the duration of the transition - Android - An Open Handset Alliance Project - Google Project Hosting
- scale
- 結構"クラス名. *"みたいな比較的重いセレクタを利用している。まあ要素が少ないからいいか。
- ループ動作はシーンのリスタートで実現。-webkit-animation-iteration-countでしてないためか、わずかに引っかかる感じがする。
- Animation Loop [アーカイブ] - Sencha Forum