Canvas tutorial
•
2 recomendaciones•1,290 vistas
canvasアニメーションのチュートリアル 2015/02/12（木） 19:00〜 LIG・SHIFTBRAIN・Uniba合同LT会 : 別冊ライトニングトーク Vol. 1にて
Recomendados
Más contenido relacionado
Destacado
Canvas tutorial
- 3. Canvas?
- 10. Animation?
- 11. fillRect x=0,y=0
- 12. clearRect
- 17. Clear and Draw
- 19. requestAnimationFrame • ブラウザ側でアニメーションが更新できる準備が整っ たときに実行 • 別タブに移っても大量にスタックされない • 完全な間隔調整はできない • fpsは経過時間を用いてある程度操作可能
- 21. Easing Function
- 23. Math.easeInQuad = function(t,b,c,d){ t /= d; return c*t*t + b; }; • t = 今の時間 • b = アニメーション開始時の値 • c = アニメーション終了時の値 • d = アニメーションの長さ
- 24. Use $.animate or Tween Engine
- 25. $(変数).stop().animate({x:100}, { duration: duration easing: easing progress: 処理関数 }) progressはstepでもOK stepはプロパティ毎に、progressはプロパティの数に 関係なくアニメーション要素毎に一度だけ呼び出される
- 27. Optimization
- 28. 拡大縮小しないシェイプやテキストを使い回すなら 画像としてキャッシュしよう シェイプ ビットマップ .toDataURLなど 描くメソッド 描くメソッド arc+fill drawImage 軽い重い
- 31. Library
- 33. • レイヤーのように管理できる • フィルターが便利！（重いのもあるで使い方に注意） • webGLモード搭載（制限が多い）、 requestAnimationFrame設定もお手のもの • Tween.jsやPreload.jsも便利だよ！（個別に使っても 便利だよ！） • プラグインを含め、とにかく多機能 • 先日の大型アップデートで結構かゆいとこに手が届 くように
- 35. • レイヤーのように管理できる • フィルターが便利！（重いのもあるで使い方に注意） • webGLモード搭載（制限は少ない模様） • アニメーション周りは自分で書く • かなり滑らか
- 39. example
- 40. • http://devjam.net/demo/snowsample_01/ • http://devjam.net/demo/filmsample_02/ • http://devjam.net/demo/splitsample_02/ • http://devjam.net/demo/gradientsample_02/