Skip to content

Tween Interface

Properties and Interface

Interface

InterfaceDescription
tagAdd a number tag to the current tween
toCreate motion by interpolating the property’s value to an absolute value
byCreate motion by interpolate the property’s value to a value relative to the current one
setCreate an instant motion by setting the property to a value
delayCreate an instant motion of pausing for a period of time
callCreate an instant motion by calling a function
targetDefine the target node or component to which the tween is applied
unionCombine multiple motions as one tween
thenInsert a new motion to the current tween queue
repeatDefine the number of times for the motion to be executed (In previous versions, this is used to define the number of times the motion is repeated.)
repeatForeverSet the motion to repeat for infinite times
sequenceDefine a collection of motions to be executed in sequence
parallelDefine a collection of motions to be executed simultaneously
startStart the tween
stopStop the tween
cloneClone the tween
showEnable the tween target to be rendered. Tween target is mandatory to be Node.
hideDisable the tween target to be rendered. Tween target is mandatory to be Node.

Static Interface

Static methods in the Tween class are as follows:

ts
Tween.stopAll()
Tween.stopAllByTag(0);
Tween.stopAllByTarget(this.node);
InterfaceDescription
stopAllStop all tween motions.
This method will remove all registered tweens at root level.
Note: this method will affect all tween targets.
stopAllByTagStop all tween motions by their number tags.
This method will remove all registered tweens by the designated tag at the root level. Users may use the method parameter target?: object to check if the tween is attached with the tag.
stopAllByTargetStop all tween motions by their targets

Utility Function

InterfaceDescription
tween<T>Utility function to help instantiate the Tween class.
Note: This function is not a member of the Tween class. Users may call new Tween<T>(target:T) to instantiate a new tween instance.

Example

The following is an example of using to method to create tween motions:

ts
let tweenDuration : number = 1.0;                                   // Duration of the tween
tween(this.node.position).to( tweenDuration, new Vec3(0, 10, 0),    // Here takes the target of the node's position
    {                                                               // Interface implementation of 'ITweenOption'.
    onUpdate : (target:Vec3, ratio:number)=>{                       // onUpdate accepts the current tween progress
        this.node.position = target;                                // Assign the position of the node to the result calculated by the tween system
    }
}).start();                                                         // Start the tween by calling 'start' function

For more examples, please see Tween Example.

Caveats

To avoid frequent updates to the transform data of nodes, Node class is constructed with an internal dirty state which only permits updating when modifications to the node’s transform data is called.

Due to pre-existing limitations, such as the position data returned by this.node.position being a public vector, certain coding conventions may not behave as expected.

For instance, when attempting to execute this.node.position.x = 1, the code only calls the getter for the position data and not the setter for the dirty state data to be updated, thus no transform data of the node will remain unchanged.

We advise against coding in such a manner and encourage users to call the setter for the position data via method setPosition instead, such as:

typescript
let _pos = new Vec3(0, 1, 0);
this.node.position = _pos;      // Use the setter of 'Transform.position'
this.node.setPosition(_pos);    // Or use the 'setPosition' function