Controlling Animation with Scripts

    In the Animation Component, Animation States are identified by name, and the default name of each animation state is the name of its Animation Clip.

    Adding an Animation Component to a node in a script is done in the following way:

    Playing animations

    The Animation Component controls the playback of the specified animation via the API, e.g:

    2. animationComponent.play('idle');
    3. // Specify that the 'idle' animation will be played from 1s onwards
    4. animationComponent.play('idle', 1);

    If no specific animation is specified and defaultClip is set when using play to play an animation, the defaultClip animation will be played. If the playOnLoad of the Animation Component is also set to true, the Animation Component will automatically play the contents of defaultClip on the first run.

    Switching animation

    When using the play interface to play an animation, if there are other animations playing at the same time, the other animations will be stopped immediately. This switch is very abrupt, and in some cases we want the switch to be a “fade in and fade out” effect, use to smoothly complete the switch within the specified period. For example:

    1. // Play the animation state 'walk'
    2. animationComponent.play('walk');
    6. // Smoothly switch from walk to run animation in 0.3 seconds
    7. animationComponent.crossFade('run', 0.3);

    Even so, the Animation Component provides pause(), resume(), and stop() methods that pause, resume, and stop all the animation states being played while also pausing, resuming, and stopping the animation switching.

    For more details about the control interface related to the Animation Component, please refer to the Class Animation.

    The Animation Component only provides some simple control functions, which are mostly sufficient and easy to use, but for more animation information and animation control interfaces, review the documentation.

    The Animation panel supports visual editing of event frames, or frame events can be added directly to the script.

    The events of an AnimationClip contain all the frame events of this animation, each with the following properties:

    • frame: the point in time when the event will be triggered, in seconds. For example, 0.618 means the event will be triggered when the animation reaches the 0.618th second. For the conversion between timeline scale units, please refer to the documentation.

    The code implemented in the script is as follows:

    2.     frame: 0.5;
    3.     func: 'onTrigger';
    4.     params: [ 0 ];
    5. }

    Example

    The following code indicates that the default Animation Clip of the Animation Component of the node where the MyScript script component is located will call the onTriggered() method of the MyScript component when it reaches the 0.5 second mark and pass the parameter 0.

    In addition to the callbacks provided by the frame events in the Animation panel, the animation system also provides a way to call back animation events. The currently supported callback events include:

    • play: triggered when playback starts
    • stop: triggered when playback is stopped
    • pause: triggered when playback is paused
    • resume: triggered when playback is resumed
    • lastframe: if the animation loop is greater than 1, triggered when the animation reaches the last frame.

    For more details, please refer to the API.