スマートフォンのブラウザでのアニメーションに関するツールのメモ

生成する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を調べてみた。
    • http://hi-posi.jp/?p=1084
• 画像は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ランタイム。

• Android/iPhoneで動作させるため、表示はSVGを使わずCanvas + 画像に変換する。
• スマートフォンのモバゲーのゲームのソースなどを読んでいるとExGameは相当使われている。グリーのゲームでReelはあまり見ない。
  • ExGameが使われたCanvasによるアニメーションでも、スムーズさはCSS Transition/Animationに劣るが、それなりなアニメーションができている。Adobe Flash Professionalで作れるという点でコストパフォーマンスが高そう。
• ユーザーアクセス時に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
    • http://www.sencha.com/forum/archive/index.php/t-149650.html?s=536b32a055f1d71071bdaa7a4582aa76
  • 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
      • http://code.google.com/p/android/issues/detail?id=12451
  • scale
    • scale3d()をCSS Animationで利用。イメージはimgをdivでラップして実装しているのでサイズ変更はこちらを使うしかない。
    • 移動しながらになるとscale() + translate()のAndroidバグに引っかかるかも。親子関係を指定できれば、親にtranslate()・子にscale()で逃げるテクニックが使えるのだけど。
  • 結構"クラス名. *"みたいな比較的重いセレクタを利用している。まあ要素が少ないからいいか。
  • ループ動作はシーンのリスタートで実現。-webkit-animation-iteration-countでしてないためか、わずかに引っかかる感じがする。
    • Animation Loop [アーカイブ] - Sencha Forum
      • http://www.sencha.com/forum/archive/index.php/t-132966.html?s=536b32a055f1d71071bdaa7a4582aa76

他

• ライセンス
  • 実は利用する場合の一番の懸念点がここにある。通常ライセンスは$199。ただし、広告素材の作成がライセンスで許可されてない。
    • 広告素材というとバナーなどが含まれそうだが、例えばゲームのアニメーションに利用した場合にそのゲーム画面のムービーを広告に利用するケースに問題な以下などを業務利用の前に問い合わせる必要あり。
• UI
  • Adobe Flash Professionalに似ているが、フレームベースではなく、時間ベースのタイムライン。
    • CSS Animation/CSS Transitionを利用しているのでframeベースのように厳密な同期が難しいということも関係しているのかも。
  • 移動の軌跡が表示されるなど、視覚的に非常に使いやすいUI。
  • グラデーションなども自由に設定可能
• 生成するコードがシンプルなので、メンテナンスコストは上がるがAndroid/iPhoneのバグなどを生成結果に手を加えて避けることができるかも。