今回から，
図1 ステージ上のクリックした位置に同心円のリングが時間差でトゥイーンする
オブジェクトをステージ上のクリックした位置にトゥイーンする
トゥイーンの基本は前回のお題ですでに解説した。今回新たに覚えることは，
第1のクリックは，
Stageオブジェクト.addEventListener("stagemouseup", リスナー関数);
マウスポインタのステージ上の座標も，
script要素全体は，
StageオブジェクトのStage.
なお，
var stage;
var circle;
function initialize() {
// ...[中略:...
circle = createCircle(10, "#113355", 20);
// ...[中略:...
stage.addChild(circle);
stage.addEventListener("stagemouseup", startTween);
createjs.Ticker.addEventListener("tick", stage);
}
function createCircle(stroke, color, radius) {
// ...[中略:...
}
// ...[中略:...
function startTween(eventObject) {
setTween(circle, stage.mouseX, stage.mouseY, 1500);
}
function setTween(target, nX, nY, duration) {
createjs.Tween.get(target)
.to({x:nX, y:nY}, duration, createjs.Ease.bounceOut);
}
さらに，
var stage;
var circle;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
var nWidth = canvasElement.width;
var nHeight = canvasElement.height;
var nX = Math.random() * nWidth;
var nY = Math.random() * nHeight;
circle = createCircle(10, "#113355", 20);
setAppearance(circle, nX, nY);
setTween(circle, nWidth / 2, nHeight / 2, 1500);
// ...[中略:...
}
// ...[中略:...
function setAppearance(instance, nX, nY) {
instance.x = nX;
instance.y = nY;
}
これで，
図2 ステージをクリックした位置にリングがトゥイーンアニメーションする
コード1 オブジェクトひとつをステージ上のクリックした位置にトゥイーンさせる
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script>
var stage;
var circle;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
var nWidth = canvasElement.width;
var nHeight = canvasElement.height;
var nX = Math.random() * nWidth;
var nY = Math.random() * nHeight;
circle = createCircle(10, "#113355", 20);
setAppearance(circle, nX, nY);
setTween(circle, nWidth / 2, nHeight / 2, 1500);
stage.addChild(circle);
stage.addEventListener("stagemouseup", startTween);
createjs.Ticker.addEventListener("tick", stage);
}
function createCircle(stroke, color, radius) {
var circle = new createjs.Shape();
var myGraphics = circle.graphics;
myGraphics.setStrokeStyle(stroke);
myGraphics.beginStroke(color);
myGraphics.drawCircle(0, 0, radius);
return circle;
}
function setAppearance(instance, nX, nY) {
instance.x = nX;
instance.y = nY;
}
function startTween(eventObject) {
setTween(circle, stage.mouseX, stage.mouseY, 1500);
}
function setTween(target, nX, nY, duration) {
createjs.Tween.get(target)
.to({x:nX, y:nY}, duration, createjs.Ease.bounceOut);
}
</script>
