前回までのあらすじは,
イージングをランダムに変える
まず,
第2回 コード2 ランダムな垂直位置と時間で左右を行き来するトゥイーンアニメーション
var stage;
var myBitmap;
var top = 0;
var bottom;
var left = 0;
var right;
var currentSide;
function initialize() {
canvasObject = document.getElementById("myCanvas");
var file = "images/Pen.png";
var loader = new createjs.LoadQueue(false);
right = canvasObject.width;
bottom = canvasObject.height;
stage = new createjs.Stage(canvasObject);
loader.addEventListener("fileload", draw);
loader.loadFile(file);
}
function draw(eventObject) {
var myImage = eventObject.result;
var halfWidth = myImage.width / 2;
var halfHeight = myImage.height / 2;
top += halfHeight;
bottom -= halfHeight;
left += halfWidth;
right -= halfWidth;
myBitmap = new createjs.Bitmap(myImage);
myBitmap.regX = halfWidth;
myBitmap.regY = halfHeight;
myBitmap.x = halfWidth;
myBitmap.y = (top + bottom) / 2;
stage.addChild(myBitmap);
stage.update();
setRandomTween(myBitmap, "left");
createjs.Ticker.addEventListener("tick", stage);
}
function setRandomTween(target, side) {
var nextPoint = getNextPosition(side);
var randomTime = Math.random() * 5000 + 1000;
setTween(target, nextPoint, randomTime, createjs.Ease.bounceOut);
}
function setTween(target, myPoint, time, easing) {
createjs.Tween.get(target)
.to({x:myPoint.x, y:myPoint.y}, time, easing)
.call(setRandomTween, [target, currentSide]);
}
function getNextPosition(side) {
var nextX;
var nextY = Math.random() * (bottom - top) + top;
if (side == "left") {
currentSide = "right";
nextX = right;
} else {
currentSide = "left";
nextX = left;
}
return new createjs.Point(nextX, nextY);
}
ランダムに選ぶイージングは,
イージングの種類も数も,
var easings = [createjs.Ease.circIn, createjs.Ease.bounceOut, createjs.Ease.elasticInOut];
function setRandomTween(target, side) {
var nextPoint = getNextPosition(side);
var randomTime = Math. random() * 5000 + 1000;
var easing = easings[Math. floor(Math. random() * easings. length)];
// setTween(target, nextPoint, randomTime, createjs. Ease. bounceOut);
setTween(target, nextPoint, randomTime, easing);
}
さらに,
function draw(eventObject) {
var myImage = eventObject.result;
var halfWidth = myImage.width / 2;
var halfHeight = myImage.height / 2;
/*
top += halfHeight;
bottom -= halfHeight;
left += halfWidth;
right -= halfWidth;
*/
setGeometricData(halfWidth, halfHeight);
// ...[中略]...
}
function setGeometricData(offsetX, offsetY) {
top += offsetY;
bottom -= offsetY;
left += offsetX;
right -= offsetX;
}
第2回コード2にこれらの手を加えたのが,
コード1 トゥイーンの時間と垂直位置およびイージングがランダムに左右を行き来するアニメーション
var stage;
var myBitmap;
var top = 0;
var bottom;
var left = 0;
var right;
var currentSide;
var easings = [createjs.Ease.circIn, createjs.Ease.bounceOut, createjs.Ease.elasticInOut];
function initialize() {
canvasObject = document.getElementById("myCanvas");
var file = "images/Pen.png";
var loader = new createjs.LoadQueue(false);
right = canvasObject.width;
bottom = canvasObject.height;
stage = new createjs.Stage(canvasObject);
loader.addEventListener("fileload", draw);
loader.loadFile(file);
}
function draw(eventObject) {
var myImage = eventObject.result;
var halfWidth = myImage.width / 2;
var halfHeight = myImage.height / 2;
setGeometricData(halfWidth, halfHeight);
myBitmap = new createjs.Bitmap(myImage);
myBitmap.regX = halfWidth;
myBitmap.regY = halfHeight;
myBitmap.x = halfWidth;
myBitmap.y = (top + bottom) / 2;
stage.addChild(myBitmap);
stage.update();
setRandomTween(myBitmap, "left");
createjs.Ticker.addEventListener("tick", stage);
}
function setGeometricData(offsetX, offsetY) {
top += offsetY;
bottom -= offsetY;
left += offsetX;
right -= offsetX;
}
function setRandomTween(target, side) {
var nextPoint = getNextPosition(side);
var randomTime = Math.random() * 5000 + 1000;
var easing = easings[Math.floor(Math.random() * easings.length)];
setTween(target, nextPoint, randomTime, easing);
}
function setTween(target, myPoint, time, easing) {
createjs.Tween.get(target)
.to({x:myPoint.x, y:myPoint.y}, time, easing)
.call(setRandomTween, [target, currentSide]);
}
function getNextPosition(side) {
var nextX;
var nextY = Math.random() * (bottom - top) + top;
if (side == "left") {
currentSide = "right";
nextX = right;
} else {
currentSide = "left";
nextX = left;
}
return new createjs.Point(nextX, nextY);
}