finish() (since version 2.0.0)

Stop all animations on the object and set all end values.

Description

Stop all animations on the object. This will clear all the animations from the queue for this object, and also set all end values.

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. The finish() method will stop the current animation and set the final values, before starting a new animation. Try clicking on the rectangle while it is animating. The animation will rotate the rectangle 360 degrees. With the callback we specify that the fill color should be red when the animation is complete.

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 + 360
	}, {
		duration: "long",
		easing: "ease-in-out-cubic",
		callback: function () {
			this.fill = "#f00";
			canvas.redraw();
		}
	});
});