API Documentation for: 0.4.1
Show:

Tween Class

Defined in: Tween:74
Module: TweenJS

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

()

Defined in Tween:74

Methods

_addAction

(
  • o
)
protected

Defined in _addAction:834

Parameters:

_addStep

(
  • o
)
protected

Defined in _addStep:820

Parameters:

_appendQueueProps

(
  • o
)
protected

Parameters:

_cloneProps

(
  • props
)
protected

Defined in _cloneProps:807

Parameters:

_register

() protected static

Defined in _register:286

Registers or unregisters a tween with the ticking system.

_runActions

(
  • startPos
  • endPos
  • includeStart
)
protected

Defined in _runActions:743

Parameters:

_set

(
  • props
  • o
)
protected

Defined in _set:845

Parameters:

_updateTargetProps

(
  • step
  • ratio
)
protected

Parameters:

call

(
  • callback
  • params
  • scope
)
Tween

Defined in call:535

Queues an action to call the specified function.

Parameters:

  • callback Function

    The function to call.

  • params Array

    Optional. 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 Object

    Optional. The scope to call the function in. If omitted, it will be called in the target's scope.

Returns:

Tween: This tween instance (for chaining calls).

Example:

  //would call myFunction() after 1s.      
  myTween.wait(1000).call(myFunction);

clone

() protected

Defined in clone:694

get

(
  • target
  • [props]
  • [pluginData]
  • [override=false]
)
Tween static

Defined in get:162

Returns a new tween instance. This is functionally identical to using "new Tween(...)", but looks cleaner with the chained syntax of TweenJS.

Parameters:

  • target Object

    The target object that will have its properties tweened.

  • [props] Object optional

    The 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 optional

    An object containing data for use by installed plugins. See individual plugins' documentation for details.

  • [override=false] Boolean optional

    If true, any previous tweens on the same target will be removed. This is the same as calling Tween.removeTweens(target).

Returns:

Tween: A reference to the created tween. Additional chained tweens, method calls, or callbacks can be applied to the returned tween instance.

Example:

var tween = createjs.Tween.get(target);

hasActiveTweens

(
  • target
)
Boolean static

Defined in hasActiveTweens:249

Indicates whether there are any active tweens on the target object (if specified) or in general.

Parameters:

  • target Object

    Optional. If not specified, the return value will indicate if there are any active tweens on any target.

Returns:

Boolean: A boolean indicating whether there are any active tweens.

initialize

(
  • target
  • props
  • pluginData
)
protected

Defined in initialize:473

Parameters:

installPlugin

(
  • plugin
  • properties
)
static

Defined in installPlugin:262

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.

Parameters:

  • plugin Object

    The plugin class to install

  • properties Array

    An array of properties that the plugin will handle.

pause

(
  • tween
)
Tween

Defined in pause:579

Queues an action to to pause the specified tween.

Parameters:

  • tween Tween

    The tween to play. If null, it pauses this tween.

Returns:

Tween: This tween instance (for chaining calls)

play

(
  • tween
)
Tween

Defined in play:567

Queues an action to to play (unpause) the specified tween. This enables you to sequence multiple tweens.

Parameters:

  • tween Tween

    The tween to play.

Returns:

Tween: This tween instance (for chaining calls).

Example:

myTween.to({x:100},500).play(otherTween);

removeAllTweens

() static

Defined in removeAllTweens:233

Available since 0.4.1

Remove all tweens. This will stop and clean up all existing tweens.

removeTweens

(
  • target
)
static

Defined in removeTweens:214

Removes all existing tweens for a target. This is called automatically by new tweens if the override property is true.

Parameters:

  • target Object

    The target object to remove existing tweens from.

set

(
  • props
  • target
)
Tween

Defined in set:553

Queues an action to set the specified props on the specified target. If target is null, it will use this tween's target.

Parameters:

  • props Object

    The properties to set (ex. {visible:false}).

  • target Object

    Optional. The target to set the properties on. If omitted, they will be set on the tween's target.

Returns:

Tween: This tween instance (for chaining calls).

Example:

myTween.wait(1000).set({visible:false},foo);

setPaused

(
  • value
)
Tween

Defined in setPaused:667

Pauses or plays this tween.

Parameters:

  • value Boolean

    Indicates whether the tween should be paused (true) or played (false).

Returns:

Tween: This tween instance (for chaining calls)

setPosition

(
  • value
  • actionsMode
)
Boolean

Defined in setPosition:590

Advances the tween to a specified position.

Parameters:

  • value Number

    The position to seek to in milliseconds (or ticks if useTicks is true).

  • actionsMode Number

    Optional 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 to LOOP. Tween.REVERSE (2) - if new position is less than old, run all actions between them in reverse.

Returns:

Boolean: Returns true if the tween is complete (ie. the full tween has run & loop is false).

tick

(
  • delta
)

Defined in tick:656

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 Number

    The time to advance in milliseconds (or ticks if useTicks is true).

tick

(
  • delta
  • paused
)
static

Defined in tick:193

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.

Parameters:

  • delta Number

    The change in time in milliseconds since the last tick. Required unless all tweens have useTicks set to true.

  • paused Boolean

    Indicates whether a global pause is in effect. Tweens with ignoreGlobalPause will ignore this, but all others will pause if this is true.

to

(
  • props
  • duration
  • ease
)
Tween

Defined in to:516

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 Object

    An object specifying property target values for this tween (Ex. {x:300} would tween the x property of the target to 300).

  • duration Number

    Optional. The duration of the wait in milliseconds (or in ticks if useTicks is true). Defaults to 0.

  • ease Function

    Optional. The easing function to use for this tween. Defaults to a linear ease.

Returns:

Tween: This tween instance (for chaining calls).

Example:

createjs.Tween.get(target).to({alpha:0}, 1000);

toString

() String

Defined in toString:685

Returns a string representation of this object.

Returns:

String: a string representation of the instance.

wait

(
  • duration
)
Tween

Defined in wait:501

Queues a wait (essentially an empty tween).

Parameters:

  • duration Number

    The duration of the wait in milliseconds (or in ticks if useTicks is true).

Returns:

Tween: This tween instance (for chaining calls).

Example:

//This tween will wait 1s before alpha is faded to 0.
createjs.Tween.get(target).wait(1000).to({alpha:0}, 1000);

Properties

_actions

Array protected

Defined in _actions:423

_curQueueProps

Object protected

Defined in _curQueueProps:402

_initQueueProps

Object protected

Defined in _initQueueProps:409

_listeners

ArrayTween protected static

Defined in _listeners:146

_paused

Boolean protected

Defined in _paused:394

Default: false

_plugins

Object protected static

Defined in _plugins:154

_prevPos

Number protected

Defined in _prevPos:448

Normalized position.

Default: -1

_prevPosition

Number protected

Defined in _prevPosition:430

Raw position.

Default: 0

_stepPosition

Number protected

Defined in _stepPosition:439

The position within the current step.

Default: 0

_steps

Array protected

Defined in _steps:416

_target

Object protected

Defined in _target:457

_useTicks

Boolean protected

Defined in _useTicks:464

Default: false

duration

Number

Defined in duration:335

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

IGNORE

Object static

Defined in IGNORE:138

Constant returned by plugins to tell the tween not to use default assignment.

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

Number static

Defined in LOOP:120

Constant defining the loop actionsMode for use with setPosition.

Default: 1

loop

Boolean

Defined in loop:327

If true, the tween will loop when it reaches the end. Can be set via the props param.

Default: false

NONE

Number static

Defined in NONE:111

Constant defining the none actionsMode for use with setPosition.

Default: 0

onChange

Function

Defined in onChange:362

Called whenever the tween's position changes with a single parameter referencing this tween instance.

pluginData

Object

Defined in pluginData:345

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

Defined in position:384

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

Defined in REVERSE:129

Constant defining the reverse actionsMode for use with setPosition.

Default: 2

target

Object

Defined in target:376

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

Defined in change:369

Available since 0.4.0

Called whenever the tween's position changes with a single parameter referencing this tween instance.