Canvas Animation

tsukasaSHIFTBRAIN frontend developer

oneslocus

tsukasa-web

locus-dw.com/blog

Canvas?

<canvas></canvas>

<canvas></canvas>

fillRectarc+fill

drawImage

shadowBlur

fillText＜見えないニャン

clearRect

ア”ッ

Animation?

fillRect

x=0,y=0

clearRect

fillRect

x=30,y=0

消して描いての繰り返し

場合によっては消さずに

上書きしても大丈夫

◯◯だけClearはできない。

消したいなら次Drawしなければいい。

Clear and Draw

setTimeout

requestAnimationFrame

requestAnimationFrame

• ブラウザ側でアニメーションが更新できる準備が整っ

たときに実行

• 別タブに移っても大量にスタックされない

• 完全な間隔調整はできない

• fpsは経過時間を用いてある程度操作可能

https://github.com/tsukasa-web/myFuncs_coffee/blob/master/RAFhandler.coffee

RAFhandler

Easing Function

http://gizma.com/easing/

Math.easeInQuad  =  function(t,b,c,d){     t  /=  d;     return  c*t*t  +  b;  };

• t = 今の時間

• b = アニメーション開始時の値

• c = アニメーション終了時の値

• d = アニメーションの長さ

Use $.animate or Tween Engine

$(変数).stop().animate({x:100}, { duration: duration easing: easing progress: 処理関数 })

progressはstepでもOK

stepはプロパティ毎に、progressはプロパティの数に

関係なくアニメーション要素毎に一度だけ呼び出される

合成処理やアルファ値の設定、

画像の描画領域の設定など、色んな処理の組み合わせで

自由にアニメーションを作ってみよう！

Optimization

拡大縮小しないシェイプやテキストを使い回すなら

画像としてキャッシュしよう

シェイプ ビットマップ

.toDataURLなど

描くメソッド 描くメソッド

arc+fill drawImage軽い重い

描画する数は少ない方がいい。

つまり、グループ化できるものは画像化しちゃおう

画像化

軽い重い

ニャン

4回も描画してる

ニャン

1回の描画で済む

• 大量のオブジェクトを管理するのが大変

• マウスイベント等のイベント管理が面倒…

スクラッチで書くと容量が軽く済む。

けど面倒なことも多い。

Library

EASEL JS一番ベーシックで使いやすい。

• レイヤーのように管理できる

• フィルターが便利！（重いのもあるで使い方に注意）

• webGLモード搭載（制限が多い）、

requestAnimationFrame設定もお手のもの

• Tween.jsやPreload.jsも便利だよ！（個別に使っても

便利だよ！）

• プラグインを含め、とにかく多機能

• 先日の大型アップデートで結構かゆいとこに手が届

くように

pixi.js先日のCreateJS勉強会で実力が広まったライブラリ。 2D+webGLが得意。グラフィックの描画が少し苦手？

• レイヤーのように管理できる

• フィルターが便利！（重いのもあるで使い方に注意）

• webGLモード搭載（制限は少ない模様）

• アニメーション周りは自分で書く

• かなり滑らか

得意分野を見極め、使い分ける（両方使うのもアリ）ことで 超ぬるぬるアニメーションが実現できる

共通して言えることはSpriteSheetとcacheが 高速化のキーになる。

• http://www.goodboydigital.com/pixijs/examples/3/

• http://ics-web.jp/projects/shared-drawing/

Use Library or

Scratch

example

• http://devjam.net/demo/snowsample_01/

• http://devjam.net/demo/filmsample_02/

• http://devjam.net/demo/splitsample_02/

• http://devjam.net/demo/gradientsample_02/

DEVJAM http://devjam.net/about