delay() (since version 2.2.0)

Delay the following animations for a certain amount of time.

Description

Delay the following animations for a certain amount of time. If a queue is specified in the options, only the following animations in that queue will be delayed.

Arguments

duration : Number (since version 2.2.0)

Number of milliseconds to delay the following animations with.

options : Object (since version 2.2.0)

Options for the delay. This object can contain these properties:

queue : String

Name of the queue to delay. Default: "default"

Return Value

displayObject. Returns the display object itself.

Examples

Example 1

We create a new core instance and a rectangle that we add to the canvas. Then we bind an event handler to the rectangle, which will change the fill color to green when clicked. We then start an animation which will rotate the rectangle 180 degrees. We then queue up a delay which will happen when the animation is completed. After that we queue up a second animation that will happen when the delay is completed.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc",
	fps: 60
});

var rectangle = canvas.display.rectangle({
	x: 177,
	y: 200,
	origin: { x: "center", y: "center" },
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.bind("click tap", function () {
	this.finish();
	this.fill = "#0f0";
	canvas.redraw();

	this.animate({
		rotation: this.rotation + 180
	});
	this.delay(500);
	this.animate({
		rotation: this.rotation + 360
	}, {
		callback: function () {
			this.fill = "#f00";
			canvas.redraw();
		}
	});
});