Tween Component

Events

TweenEnd [property = {String}]
when a tween finishes

Component to animate the change in 2D properties over time.

Methods

Back to top

.cancelTween()

public this .cancelTween(String target)
target

The property to cancel

public this .cancelTween(Object target)
target

An object containing the properties to cancel.

Stops tweening the specified property or properties. Passing the object used to start the tween might be a typical use of the second signature.

Back to top

.pauseTweens()

public this .pauseTweens()

Pauses all tweens associated with the entity

Back to top

.resumeTweens()

public this .resumeTweens()

Resumes all paused tweens associated with the entity

Back to top

.tween()

public this .tween(Object properties, Number duration[, String|function easingFn])
properties

Object of numeric properties and what they should animate to

duration

Duration to animate the properties over, in milliseconds.

easingFn

A string or custom function specifying an easing. (Defaults to linear behavior.) See Crafty.easing for more information.

This method will animate numeric properties over the specified duration. These include x, y, w, h, alpha and rotation.

The object passed should have the properties as keys and the value should be the resulting values of the properties. The passed object might be modified if later calls to tween animate the same properties.

Example

Move an object to 100,100 and fade out over 200 ms.

Crafty.e("2D, Tween")
   .attr({alpha: 1.0, x: 0, y: 0})
   .tween({alpha: 0.0, x: 100, y: 100}, 200)

Example

Rotate an object over 2 seconds, using the "smootherStep" easing function.

Crafty.e("2D, Tween")
   .attr({rotation:0})
   .tween({rotation:180}, 2000, "smootherStep")