Tween Component

src/core/tween.js#L4-L12

Events

TweenEnd [an object containing the properties that finished tweening = {Object}]
when a tween finishes

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

Properties

Methods

Back to top

.tweenSpeed

src/core/tween.js#L15-L22

The rate of the tween. This property defaults to 1. When setting tweenSpeed to 0.5, tweens will take twice as long, setting it to 2.0 will make them twice as short

Back to top

.cancelTween()

src/core/tween.js#L112-L125
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()

src/core/tween.js#L139-L147
public this .pauseTweens()

Pauses all tweens associated with the entity

Back to top

.resumeTweens()

src/core/tween.js#L152-L160
public this .resumeTweens()

Resumes all paused tweens associated with the entity

Back to top

.tween()

src/core/tween.js#L55-L88
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")