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

株式会社ツクロア　秋葉秀樹 / 秋葉ちひろ

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: 65, y: 148, width: 67, height: 37},

{x: 132, y: 148, width: 69, height: 37},

{x: 0, y: 185, width: 70, height: 37},

{x: 70, y: 185, width: 70, height: 37},

{x: 140, y: 185, width: 70, height: 37},

{x: 0, y: 222, width: 69, height: 37},

{x: 69, y: 222, width: 68, height: 37}

];

{x: 0, y: 0, width: 69, height: 37}

HOME

Friends

Favorite

Message

Photos

Communities

• ドロワー

アプリUIをデザイン

DEMO


【普通の状態】<body>

【ドロワー表示中】<body class="drawerOpen">

JavaScriptによってbodyにクラスを付け替える


<body class="drawerOpen">JavaScriptによってbodyにクラスを付け替える

【CSSだけで動きをつける】.front { left: 0px; }

.drawerOpen .front { left: 160px; }

Thank you !!!

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

Technology