HTML5テクニカルノート

CreateJS 15/05/21: Graphicsコマンドでトゥイーンアニメーションを描く

つぎのサンプル001は、Grant Skinner氏による作例「Arc Rainbow」にもとづいて、コードの構造をわかりやすく整えたものです。円弧のトゥイーンアニメーションには、Graphcisコマンドが用いられています。その仕組みについてご説明します。

サンプル001■CreateJS 15/05/21: Arc Rainbow

01 円弧を描く

先に、円弧を描くGraphics.arc()メソッドの使い方について確かめておきます。

Graphicsオブジェクト.arc(中心のx座標, 中心のy座標, 半径, 開始角, 終了角)

つぎのコードは、Graphicsインスタンス(graphics)に指定された中心座標(0, 0)と半径(50)で、開始角(startAngle)から終了角(endAngle)までの円弧を決められた線の太さ(thickness)および色(color)で描きます(図001)。

	
graphics.setStrokeStyle(thickness)
.beginStroke(color);
.arc(0, 0, 50, startAngle, endAngle);

図001■Graphicsインスタンスに円弧が描かれた

02 Graphicsコマンドを使わない円弧のトゥイーンアニメーション

前掲サンプル001の中で円弧のアニメーションのみ抜き出したのが、つぎのサンプル002です。初めてコードを見たとき戸惑うのは、以下のようにGraphics.arc()メソッドが初めに1度しか呼び出されていないことです。Ticker.addEventListener()メソッドには、Ticker.tickイベントのリスナーとしてStageオブジェクトを渡しています。この場合、Ticker.tickイベントではStage.update()メソッドが呼び出されるだけです(「EaselJS 0.8.1: イベントリスナーを扱うEventDispatcher」「説明」参照)。円弧が描き直されることはなさそうに見えます。

サンプル002■CreateJS 15/05/21: Arc tween animation with Graphics command

function initialize(eventObject) {

	draw();
	stage.update();
	createjs.Ticker.addEventListener("tick", stage);
}
function draw() {

	graphics.setStrokeStyle(10 + Math.random() * 10)
	.beginStroke(color);
	var arcCommand = graphics.arc(0, 0, 50, randomAngle, randomAngle).command;

}

Graphicsコマンドを使わず、円弧は関数(update())で描き変えるとすれば、つぎのようにTween.changeイベントのリスナーに定めることになるでしょう。トゥイーンする円弧を描くためにGraphics.arc()メソッドに渡す引数値はオブジェクト(settings)に定め、それをトゥイーンの対象としてTween.get()メソッドに与えています。これで円弧をトゥイーンアニメーションで描くことができます。

var settings;

function draw() {

	graphics.setStrokeStyle(thickness)
	.beginStroke(color);
	.arc(0, 0, 50, randomAngle, randomAngle);

	settings = {endAngle: randomAngle, startAngle: randomAngle, color:color, thickness: thickness}
	var tween = createjs.Tween.get(settings, {loop: true})
	.to({endAngle: angle}, Math.random()* angle * 100 + 3000, createjs.Ease.easeOut)
	.to({startAngle: angle}, Math.random() * 1000 + 3000, createjs.Ease.easeIn);
	tween.addEventListener("change", update);

}
function update(eventObject) {

	graphics.clear()
	.setStrokeStyle(settings.thickness)
	.beginStroke(settings.color)
	.arc(0, 0, 50, settings.startAngle, settings.endAngle);
	stage.update();
}

03 Graphicsコマンドを使った円弧のトゥイーンアニメーション

Graphics.commandプロパティから得たGraphicsコマンド(arcCommand)をトゥイーンするなら、上のコードがつぎのように書き替えられます。Tween.get()メソッドには、Graphicsコマンドがトゥイーンの対象として渡せます。すると、円弧を書き直すための関数(update())は要らなくなるのです。

	
// var settings;
function initialize(eventObject) {

	draw();
	stage.update();
	createjs.Ticker.addEventListener("tick", stage);
}
function draw() {

	graphics.setStrokeStyle(thickness)
	.beginStroke(color);
	// .arc(0, 0, 50, randomAngle, randomAngle);
	var arcCommand = graphics.arc(0, 0, 50, randomAngle, randomAngle).command;

	// settings = {endAngle: randomAngle, startAngle: randomAngle, color:color, thickness: thickness}
	// var tween = createjs.Tween.get(settings, {loop: true})
	var tween = createjs.Tween.get(arcCommand, {loop: true})
	.to({endAngle: angle}, Math.random()* angle * 100 + 3000, createjs.Ease.easeOut)
	.to({startAngle: angle}, Math.random() * 1000 + 3000, createjs.Ease.easeIn);
	// tween.addEventListener("change", update);

}
/*
function update(eventObject) {
	var graphics = shape.graphics;
	graphics.clear()
	.setStrokeStyle(settings.thickness)
	.beginStroke(settings.color)
	.arc(0, 0, 50, settings.startAngle, settings.endAngle);
	stage.update();
}
*/

Graphics APIは内部的にGraphicsコマンドを使って描画しています(「EaselJS 0.8.0: Graphicsクラス」参照)。その手順はCanvas APIに近く、まずパスをつくってから、塗りと線を描きます。Graphics.arc()メソッドを呼び出すとGraphics.Arcクラスのコマンドオブジェクトがつくられ、Graphics.commandプロパティから返されます。

Graphics.Arcコマンドオブジェクトは円弧の開始角と終了角を、それぞれプロパティGraphics.Arc.startAngleとGraphics.Arc.endAngleにもちます。ですから、それらのプロパティはTweenクラスでトゥイーンさせることができ、画面が描き替わるとき(Stage.update()メソッド呼び出し時)に表示は改められるのです。前掲サンプル001のスクリプトは、つぎのコード001のとおりです。

コード001■Graphicsコマンドで円弧のトゥイーンアニメーションを描く

var stage;
var shape = new createjs.Shape();
function initialize(eventObject) {
	var canvasElement = document.getElementById("canvas");
	stage = new createjs.Stage(canvasElement);
	stage.addChild(shape);
	shape.x = canvasElement.width / 2;
	shape.y = canvasElement.height / 2;
	draw();
	stage.update();
	createjs.Ticker.addEventListener("tick", stage);
}
function draw() {
	var graphics = shape.graphics;
	var color = createjs.Graphics.getHSL(Math.random() * 360, 100, 40);
	var thickness = 10 + Math.random() * 10;
	var randomAngle = Math.random() * Math.PI * 2;
	graphics.setStrokeStyle(thickness)
	.beginStroke(color);
	var arcCommand = graphics.arc(0, 0, 50, randomAngle, randomAngle).command;
	var angle = randomAngle + Math.PI * 2 * (Math.random() > 0.5 ? 1 : -1);
	var tween = createjs.Tween.get(arcCommand, {loop: true})
	.to({endAngle: angle}, Math.random()* angle * 100 + 3000, createjs.Ease.easeOut)
	.to({startAngle: angle}, Math.random() * 1000 + 3000, createjs.Ease.easeIn);
	createjs.Tween.get(shape, {loop: true})
	.to({rotation: -360}, 15000, createjs.Ease.easeOut);
}
window.addEventListener("load", initialize);

作成者: 野中文雄
作成日: 2015年12月1日