html5のcanvas2dアニメーションことはじめ（webプラットフォーム勉強会 1307）
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: 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
アプリUIをデザイン
【 普通の状態】<body>
【 ドロワー表示中】<body class="drawerOpen">
JavaScriptによってbodyにクラスを付け替える
アプリUIをデザイン
<body class="drawerOpen">JavaScriptによってbodyにクラスを付け替える
【CSSだけで動きをつける】.front { left: 0px; }
.drawerOpen .front { left: 160px; }
Thank you !!!