Tween Class
A Tween instance tweens properties for a single target. Instance methods can be chained for easy construction and sequencing:
Example
target.alpha = 1;
Tween.get(target)
.wait(500)
.to({alpha:0, visible:false}, 1000)
.call(onComplete);
function onComplete() {
//Tween complete
}
Multiple tweens can point to the same instance, however if they affect the same properties there could be unexpected
behaviour. To stop all tweens on an object, use removeTweens or pass override:true
in the props argument.
Tween.get(target, {override:true}).to({x:100});
Subscribe to the "change" event to get notified when a property of the target is changed.
Tween.get(target, {override:true}).to({x:100}).addEventListener("change", handleChange);
function handleChange(event) {
// The tween changed.
}
See the Tween get method for additional param documentation.
Constructor
Tween
()
Item Index
Methods
- _addAction
- _addStep
- _appendQueueProps
- _cloneProps
- _register static
- _runActions
- _set
- _updateTargetProps
- call
- clone
- get static
- hasActiveTweens static
- initialize
- installPlugin static
- pause
- play
- removeAllTweens static
- removeTweens static
- set
- setPaused
- setPosition
- tick
- tick static
- to
- toString
- wait
Properties
- _actions
- _curQueueProps
- _initQueueProps
- _listeners static
- _paused
- _plugins static
- _prevPos
- _prevPosition
- _stepPosition
- _steps
- _target
- _useTicks
- duration
- IGNORE static
- ignoreGlobalPause
- LOOP static
- loop
- NONE static
- onChange
- pluginData
- position
- REVERSE static
- target
Events
Methods
_register
()
protected
static
Registers or unregisters a tween with the ticking system.
_runActions
-
startPos
-
endPos
-
includeStart
call
-
callback
-
params
-
scope
Queues an action to call the specified function.
Parameters:
-
callback
FunctionThe function to call.
-
params
ArrayOptional. The parameters to call the function with. If this is omitted, then the function will be called with a single param pointing to this tween.
-
scope
ObjectOptional. The scope to call the function in. If omitted, it will be called in the target's scope.
Returns:
Example:
//would call myFunction() after 1s.
myTween.wait(1000).call(myFunction);
clone
()
protected
get
-
target
-
[props]
-
[pluginData]
-
[override=false]
Returns a new tween instance. This is functionally identical to using "new Tween(...)", but looks cleaner with the chained syntax of TweenJS.
Parameters:
-
target
ObjectThe target object that will have its properties tweened.
-
[props]
Object optionalThe configuration properties to apply to this tween instance (ex.
{loop:true, paused:true}
). All properties default to false. Supported props are:- loop: sets the loop property on this tween.
- useTicks: uses ticks for all durations instead of milliseconds.
- ignoreGlobalPause: sets the ignoreGlobalPause property on this tween.
- override: if true, Tween.removeTweens(target) will be called to remove any other tweens with the same target.
- paused: indicates whether to start the tween paused.
- position: indicates the initial position for this tween.
- onChange: specifies an onChange handler for this tween. Note that this is deprecated in favour of the "change" event.
-
[pluginData]
Object optionalAn object containing data for use by installed plugins. See individual plugins' documentation for details.
-
[override=false]
Boolean optionalIf true, any previous tweens on the same target will be removed. This is the same as calling
Tween.removeTweens(target)
.
Returns:
Example:
var tween = createjs.Tween.get(target);
hasActiveTweens
-
target
Indicates whether there are any active tweens on the target object (if specified) or in general.
Parameters:
-
target
ObjectOptional. If not specified, the return value will indicate if there are any active tweens on any target.
Returns:
initialize
-
target
-
props
-
pluginData
installPlugin
-
plugin
-
properties
Installs a plugin, which can modify how certain properties are handled when tweened. See the CSSPlugin for an example of how to write TweenJS plugins.
pause
-
tween
Queues an action to to pause the specified tween.
Parameters:
-
tween
TweenThe tween to play. If null, it pauses this tween.
Returns:
play
-
tween
Queues an action to to play (unpause) the specified tween. This enables you to sequence multiple tweens.
Parameters:
-
tween
TweenThe tween to play.
Returns:
Example:
myTween.to({x:100},500).play(otherTween);
removeAllTweens
()
static
Remove all tweens. This will stop and clean up all existing tweens.
removeTweens
-
target
Removes all existing tweens for a target. This is called automatically by new tweens if the override
property is true
.
Parameters:
-
target
ObjectThe target object to remove existing tweens from.
set
-
props
-
target
Queues an action to set the specified props on the specified target. If target is null, it will use this tween's target.
Parameters:
Returns:
Example:
myTween.wait(1000).set({visible:false},foo);
setPaused
-
value
Pauses or plays this tween.
Parameters:
-
value
BooleanIndicates whether the tween should be paused (true) or played (false).
Returns:
setPosition
-
value
-
actionsMode
Advances the tween to a specified position.
Parameters:
-
value
NumberThe position to seek to in milliseconds (or ticks if useTicks is true).
-
actionsMode
NumberOptional parameter specifying how actions are handled (ie. call, set, play, pause):
Tween.NONE
(0) - run no actions.Tween.LOOP
(1) - if new position is less than old, then run all actions between old and duration, then all actions between 0 and new. Defaults toLOOP
.Tween.REVERSE
(2) - if new position is less than old, run all actions between them in reverse.
Returns:
tick
-
delta
Advances this tween by the specified amount of time in milliseconds (or ticks if useTicks
is true).
This is normally called automatically by the Tween engine (via Tween.tick
), but is exposed for advanced uses.
Parameters:
-
delta
NumberThe time to advance in milliseconds (or ticks if
useTicks
is true).
tick
-
delta
-
paused
Advances all tweens. This typically uses the Ticker class (available in the EaselJS library), but you can call it manually if you prefer to use your own "heartbeat" implementation.
to
-
props
-
duration
-
ease
Queues a tween from the current values to the target properties. Set duration to 0 to jump to these value. Numeric properties will be tweened from their current value in the tween to the target value. Non-numeric properties will be set at the end of the specified duration.
Parameters:
-
props
ObjectAn object specifying property target values for this tween (Ex.
{x:300}
would tween the x property of the target to 300). -
duration
NumberOptional. The duration of the wait in milliseconds (or in ticks if
useTicks
is true). Defaults to 0. -
ease
FunctionOptional. The easing function to use for this tween. Defaults to a linear ease.
Returns:
Example:
createjs.Tween.get(target).to({alpha:0}, 1000);
toString
()
String
Returns a string representation of this object.
Returns:
wait
-
duration
Queues a wait (essentially an empty tween).
Parameters:
-
duration
NumberThe duration of the wait in milliseconds (or in ticks if
useTicks
is true).
Returns:
Example:
//This tween will wait 1s before alpha is faded to 0.
createjs.Tween.get(target).wait(1000).to({alpha:0}, 1000);
Properties
_listeners
ArrayTween
protected
static
duration
Number
Read-only. Specifies the total duration of this tween in milliseconds (or ticks if useTicks is true). This value is automatically updated as you modify the tween. Changing it directly could result in unexpected behaviour.
Default: 0
ignoreGlobalPause
Boolean
Causes this tween to continue playing when a global pause is active. For example, if TweenJS is using Ticker,
then setting this to true (the default) will cause this tween to be paused when Ticker.setPaused(true)
is called.
See Tween.tick() for more info. Can be set via the props param.
Default: false
loop
Boolean
If true, the tween will loop when it reaches the end. Can be set via the props param.
Default: false
onChange
Function
Called whenever the tween's position changes with a single parameter referencing this tween instance.
pluginData
Object
Allows you to specify data that will be used by installed plugins. Each plugin uses this differently, but in general you specify data by setting it to a property of pluginData with the same name as the plugin class.
Example:
myTween.pluginData.PluginClassName = data;
Also, most plugins support a property to enable or disable them. This is typically the plugin class name followed by "_enabled".
myTween.pluginData.PluginClassName_enabled = false;<br/>
Some plugins also store instance data in this object, usually in a property named _PluginClassName.
See the documentation for individual plugins for more details.
position
Object
Read-only. The current normalized position of the tween. This will always be a value between 0 and duration. Changing this property directly will have no effect.
REVERSE
Number
static
Constant defining the reverse actionsMode for use with setPosition.
Default: 2
target
Object
Read-only. The target of this tween. This is the object on which the tweened properties will be changed. Changing this property after the tween is created will not have any effect.
Events
change
Called whenever the tween's position changes with a single parameter referencing this tween instance.