HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307）

1. 株式会社ツクロア秋葉秀樹 / 秋葉ちひろ HTML5のcanvas2Dアニメーションことはじめ HTML5のcanvas2Dでのコマアニメーションの作り方とそれを各OSで動かした結果の報告

2. ・企画営業・DTP・グラフィックデザイン・Webフロントエンド全般・Flashゲーム開発・3DCGモデリング・Webディレクター秋葉秀樹（あきば・ひでき）自己紹介株式会社ツクロア／代表取締役 Webデザインやアプリデザインを専門

3. ・Webサイト制作・アプリ制作・UI/UXデザイン・インターフェース全般秋葉ちひろ（あきば・ちひろ）自己紹介株式会社ツクロアデザイナー「気持ちいい」をデザインするデザイナーズハック技術にしばられずに体験からデザインを考える

4. デザインや演出の制作 Firefoxブラウザ B2G Android版Firefox 主にデザインに関しては手軽にブラウザ確認で作業が進められやすい

5. デザインや演出の制作 Windows 8(※) Android版Firefox タッチイベントを取得する際はWindows 8または Android版Firefoxでつくることをオススメします

6. •外部の画像読み込み •アニメーション HTML5 Canvas要素でアニメーション

7. HTML5 Canvas要素 • ビットマップを動的に生成できる • シンプルな2Dの描画API • Web GLを使った高度な3D表現 • 処理はJavaScriptで行う • CreateJSなどライブラリも便利

8. HTML5 Canvas要素 <canvas id="canvas" width="幅" height="高さ"></canvas> <canvas></canvas>

9. HTML5 Canvas要素 var canvas = $("#canvas").get(0); var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 100, 100); DEMO 簡単な図形の描画

10. 表示結果 •塗りはグラデーションもOK •塗りではなく線だけも引ける •塗りと線を指定できる •線の太さ、先端の形状など指定可能

11. HTML5 Canvas要素 var canvas = $("#canvas").get(0); var ctx = canvas.getContext("2d"); var fish = new Image(); fish.src ="img/fish_img.png"; fish.onload = function () { //画像の読み込み完了 ctx.drawImage(fish, 0, 0); } DEMO 外部アセット画像の読み込みと表示

12. 表示結果 •読み込んだ画像の一部の領域だけ指定も可能

13. HTML5 Canvas要素 var x = 0; fish.onload = function () { //画像の読み込み完了 function draw () { ctx.clearRect(0, 0, 1000, 700); // 画面消去 ctx.setTransform(1, 0, 0, 1, x++, 0); ctx.drawImage(fish, 0, 0); mozRequestAnimationFrame(draw); } draw(); } DEMO フレームアニメーションを実現

14. 表示結果 •setTransformで座標をずらして •drawImageで左上に表示させた例

15. 応用例

16. HTML5 Canvas要素コマアニメーションを実現 var ﬁshdata = [ {x: 0, y: 0, width: 69, height: 37}, {x: 69, y: 0, width: 67, height: 37}, {x: 136, y: 0, width: 67, height: 37}, {x: 0, y: 37, width: 66, height: 37}, {x: 66, y: 37, width: 65, height: 37}, {x: 131, y: 37, width: 66, height: 37}, {x: 0, y: 74, width: 68, height: 37}, {x: 68, y: 74, width: 69, height: 37}, {x: 137, y: 74, width: 69, height: 37}, {x: 0, y: 111, width: 66, height: 37}, {x: 66, y: 111, width: 64, height: 37}, {x: 130, y: 111, width: 62, height: 37}, {x: 192, y: 111, width: 64, height: 37}, {x: 0, y: 148, width: 65, height: 37}, {x: 0, y: 0, width: 69, height: 37}

17. HOME Friends Favorite Message Photos Communities • ドロワーアプリUIをデザイン DEMO

18. アプリUIをデザイン【普通の状態】 <body> 【ドロワー表示中】 <body class="drawerOpen"> JavaScriptによってbodyにクラスを付け替える

19. アプリUIをデザイン <body class="drawerOpen"> JavaScriptによってbodyにクラスを付け替える【CSSだけで動きをつける】 .front { left: 0px; } .drawerOpen .front { left: 160px; }

20. Thank you !!!

HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307）

Esté a ler uma amostra.

Confira estes a seguir

HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307）

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (12)

Semelhante a HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307） (20)

Mais de Hideki Akiba (10)

Mais recentes (20)