• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
 

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

on

  • 924 views

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

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

Statistics

Views

Total Views
924
Views on SlideShare
889
Embed Views
35

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 35

https://twitter.com 35

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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