広告の限界を超える|セールス
広告の限界を超える|セールス
2014.02.18

Canvasで落下するボールのアニメーションを表現する方法

小林

お世話になっております。

先日、JavaScriptで落下するボールのアニメーションを表現する方法をご紹介しました。
今回は、これをCanvasを利用して実装してみます。

canvasで落下するボールのアニメーションを表現する方法

デモは以下のような感じになります。

Canvasで落下するボール

アニメーション部分は前回とほとんど一緒で、canvasを利用して球体っぽいものを書き出すだけですので、Createjsを利用したサンプルでご紹介します。

Createjsとは、これまでFlashで作ってたようなものをHTML5でやってみれなくもない感じにしてくれる、JavaScriptライブラリです。

ボールを作成

circle = new createjs.Shape(),
//略
circle.graphics.setStrokeStyle(borderWidth)
	.beginStroke("#000")
	.beginRadialGradientFill (color,[0.9,0.8,0.4,0.1],-9,-9,2,-2,-2,25)
	.drawCircle(0, 0, radius);
circle.x = x;
circle.y = y;

ボールっぽいものを作ります。まずは、Createjsが提供してくれるShapeで形を作る準備をします。
これに対して、色やらパスやらを指定して、形の情報を設定しています。
今回は、グラデーションなんかつけちゃったりしてるので、ちょっと複雑な感じになってますが、基本はもっと単純です。
とにかく、座標やらサイズやらを指定するだけです。

ステージ

canvas = document.getElementById("myCanvas"),
	stage = new createjs.Stage(canvas),
//略
stage.addChild(circle);
stage.update();

今度は、先ほど作成したボールを配置するスペースを作っています。
動きをつける場合は、このスペースをパラパラマンガの容量で更新していくようなイメージになりますかね。

アニメーション

function gravity() {
	y+= ++v;
	if( y >= baseLine ) {
		y = baseLine;
		v*= -R;
		if ( !~~v ) {
			createjs.Ticker.removeEventListener("tick", gravity);
		}
	}
	circle.y = y;
	stage.update();
}
createjs.Ticker.addEventListener("tick", gravity);

アニメーションもCreatejsが用意してくれるTickerというイベントハンドラを利用します。
Flashでいうアニメーション用のキーフレーム的なものを準備してくれるので、その中でどんな動きをするかを設定するだけで、素敵にアニメーションしてくれます。

まとめ

HTML5やCanvasを使うとだいたい何でもできちゃいますね。

ただね、何でもできる必要はないんです。
あれができないからだめ、これができないからだめだなんて言われても気にしないでください。
一つだけでいいんです。
自分が信じたものに精一杯チャレンジしてみてください。
こんな金言があります。

「何かやれるものを持っているというのは幸せ」

j a v a