Embed Size (px)
Citation preview
CANVASアニメーションについて柊
自己紹介
HN：柊(Hiiragi)
Twitter : @Hiiragi3
窓際Flash Developer。
JSもちょろっとやってます。
上司からの指令iPhone/AndroidへのFlashアニメーション/ゲームの移植。
JSでアニメーションってどうやって作るの？
jQueryでanimateとか駆使して、オブジェクトを動かしまくる。
CSS3のアニメーション機能を作る。
CanvasやDOM使って、頑張ってアニメーションをコーディングする。
自力でsetIntervalかsetTimeoutを使って成し遂げる。
全部、コーディングで組まないといけない。
コーディング主体のデメリット
変更内容によっては一から組み直さないと行けない。
直感的な変更が出来ない。
変更できる人が限られる。（コードが読める人）
フレームが長くなればなるほど、難解になる。
あっと言う間にコード量が増えていく。そのクセ、汎用性無し。
とにかくめんどくさい。
やはりFlashって素晴らしい。
FLASH IDEのようなアニメーション制作ツール
制作ツール
Thmult Hype (CSS3アニメーション機能を使用している）
Adobe Edge（まだ出てない。jQuery使用？）
変換ツール
clockmakerさん謹製HTML5出力ツール（jQuery使用)（非公開）
Adobe Wallaby（SVGとCSS3）
とりあえずCanvasで作ってみよう。
AS3でGraphicsとBitmapData扱うのに似てるっぽいから、なんとかなるなる。
結論
何これ、超メンドイ。
特に変形とかややこしい。
colorTransform面倒くさい。自力実装で可能だけど。
これ本当にFlashの代わりになるの？
とりあえずライブラリ探してみよう。
Easel.js
Grant Skinner先生のCanvas用ライブラリ。
AS3ライクに書ける。癖はあるけれども。
colorTransformできないとか、 出来ない事もある。
今後に期待？
一から書いて行くより、楽。（特に変形）
でもやっぱり、Flashで作る感じで作りたい。
そんなわけで、デモに入ります。
実演
CanvasAnimationConverter（仮）
ベースにEaselJSフレームワークを使用。
それを拡張するJSを独自に作って、それらを使用するコードをJSFLで動的に生成することで、アニメーションのコンバートを実現。
Canvasちゃんと実装しているブラウザなら、問題なく閲覧可能。
シェイプとかもいけるよ。（複雑なのは難あり）
パフォーマンスは？
シェイプ使ってしまうと結構重い。
画像のみでアニメーションを構築すると、まぁまぁ、実用の範囲内。
でも、画像ばかり使うと、容量が結構大きくなる。
コード自体もちょっとまだFatな感じ。
問題山積み
shapeObjには対応していない（shapeObjは拡張ツールを使用して作成されます）
embedded video、linked video、video、compiled clipには対応していない
クラシックトゥイーン・シェイプトゥイーンには対応していない
着色等のカラー効果には対応していない（Canvasの技術的には可能だが、それをEaselJSにどう乗せるか）
ブレンドモードは対応していない（EaselJSへの乗せ方が判らない）
テキストの文字別スタイル対応（クライアントサイドに同一フォントないと使えないし、いいかな・・・）
一部のグループに未対応。グループ内がシェイプとシンボル関連（ムービークリップ、ボタン、グラフィッ
ク、画像）であれば可能。
挙動の違いもあったり
円形グラデーションはJSでは正円しか使えないため、円形グラデーションを楕円変形させていると再現できない
シェイプのビットマップ塗りでのビットマップの位置設定がFlashとCanvas
で違う
Flashだとビットマップをシェイプの真中に配置する。CanvasだとCanvasの0,0に配置したうえでシェイプの部分のみ表示する（Flashのマスクと似ている）
JSFLのバグとか・・・
モーショントゥイーン中の透明度の変更に対応できない（JSFLのバグ？）
その他スケールとかも出来ない？要検証。
オブジェクトを動かした後でJSFLで位置情報を読み取ると過去の情報しか取得できないことがある
flaの再起動か一度編集モードに入って出たりすると、JSFLで最新の位置が取得できるようになる。
結論使い方次第では使えるけど、あんまり実用的ではないかも。
配布するかは微妙。反応良さげだったらするかも。でもあんまり期待しないでね。
ご清聴ありがとうございました。
