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.
View Example
Code
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();
}
});
});
Output