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