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

1,180 views

Published on

2013年7月6日、Webプラットフォーム勉強会 1307で発表したスライドです。
HTML5入門者向けです。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,180
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 株式会社ツクロア 秋葉秀樹 / 秋葉ちひろ HTML5のcanvas2Dアニメーション ことはじめ HTML5のcanvas2Dでの コマアニメーションの作り方と それを各OSで動かした結果の報告
  2. 2. ・企画営業・DTP・グラフィックデザイン ・Webフロントエンド全般 ・Flashゲーム開発・3DCGモデリング ・Webディレクター 秋葉秀樹(あきば・ひでき) 自己紹介 株式会社 ツクロア/代表取締役 Webデザインやアプリデザインを専門
  3. 3. ・Webサイト制作 ・アプリ制作 ・UI/UXデザイン ・インターフェース全般 秋葉ちひろ(あきば・ちひろ) 自己紹介 株式会社 ツクロア デザイナー 「気持ちいい」をデザインする デザイナーズハック 技術にしばられずに体験からデザインを考える
  4. 4. デザインや演出の制作 Firefoxブラウザ B2G Android版Firefox 主にデザインに関しては手軽にブラウザ確認で作業が進められやすい
  5. 5. デザインや演出の制作 Windows 8(※) Android版Firefox タッチイベントを取得する際はWindows 8または Android版Firefoxでつくることをオススメします
  6. 6. •外部の画像読み込み •アニメーション HTML5 Canvas要素で アニメーション
  7. 7. HTML5 Canvas要素 • ビットマップを動的に生成できる • シンプルな2Dの描画API • Web GLを使った高度な3D表現 • 処理はJavaScriptで行う • CreateJSなどライブラリも便利
  8. 8. HTML5 Canvas要素 <canvas id="canvas" width="幅" height="高さ"></canvas> <canvas></canvas>
  9. 9. HTML5 Canvas要素 var canvas = $("#canvas").get(0); var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 100, 100); DEMO 簡単な図形の描画
  10. 10. 表示結果 •塗りはグラデーションもOK •塗りではなく線だけも引ける •塗りと線を指定できる •線の太さ、先端の形状など指定可能
  11. 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. 12. 表示結果 •読み込んだ画像の一部の領域だけ指定も可能
  13. 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. 14. 表示結果 •setTransformで座標をずらして •drawImageで左上に表示させた例
  15. 15. 応用例
  16. 16. HTML5 Canvas要素 コマアニメーションを実現 var fishdata = [ {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. 17. HOME Friends Favorite Message Photos Communities • ドロワー アプリUIをデザイン DEMO
  18. 18. アプリUIをデザイン 【 普通の状態】 <body> 【 ドロワー表示中】 <body class="drawerOpen"> JavaScriptによってbodyにクラスを付け替える
  19. 19. アプリUIをデザイン <body class="drawerOpen"> JavaScriptによってbodyにクラスを付け替える 【CSSだけで動きをつける】 .front { left: 0px; } .drawerOpen .front { left: 160px; }
  20. 20. Thank you !!!

×