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

小林

2014.02.18

Web制作

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

先日、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でいうアニメーション用のキーフレーム的なものを準備してくれるので、その中でどんな動きをするかを設定するだけで、素敵にアニメーションしてくれます。