Using Animation Curves

All keyframes added to an Animation Property of a node in an Animation Clip are shown as linear traces in the corresponding animation property track, which is an animation curve. That is, an Animation Curve describes the change in an Animation Property on an object over time.

The Animation Curve stores internally a series of time points, each of which corresponds to a (curve) value, called a frame (keyframe). When the animation system runs, the Animation Component calculates the (result) value that should be assigned to the object at the specified time point based on the current animation state and completes the property change, a calculation process called sampling.

The following code snippet demonstrates how to create Animation Clips programmatically:

  1. import { AnimationClip, animation, js } from 'cc';
  2. const animationClip = new AnimationClip();
  3. animationClip.duration = 1.0; // The entire period of the animation clip, the frame time of any keyframe should not be greater than this property
  4. animationClip.keys = [ [ 0.3, 0.6, 0.9 ] ]; // The frame time shared by all curves of the clip
  5. animationClip.curves = [{ // Animation curves on the Animation component
  6.     modifiers: [ // Address the target object from the current node object. See the "Target Objects" section below for details
  7.         // The target object is the "Body" child of the current node.
  8.         HierarchyPath('Body'),
  9.         // The target object is the "MyComponent" component on the "Body" child of the current node.
  10.         ComponentPath(js.getClassName(MyComponent)),
  11.         // The target object is the "value" property on the "MyComponent" component of the "Body" child of the current node.
  12.         'value',
  13.     ],
  14.     data: {
  15.         // Indexed to 'animationClip.keys', i.e. [ 0.3, 0.6, 0.9 ]
  16.         keys: 0,
  17.         // Keyframe data
  18.         values: [ 0.0, 0.5, 1.0 ],
  19.     },
  20. }];

The above Animation Clip contains an Animation Curve that controls the value property of the MyComponent component in the Body child node. The Animation Curve includes three keyframes that make the value property change to 0.0 at 0.3 seconds, 0.5 at 0.6 seconds, and 1.0 at 0.9 seconds.

Note: the frame times of the keyframes on the animation curve are indexed by reference to the AnimationClip.keys array. In this way, multiple curves can share frame times, which will result in additional performance optimization.

Target objects (modifiers)

The target of an animation curve can be any JavaScript object. The modifiers field specifies how the target object is addressed from the current node object at runtime.

modifiers is an array, each element of which expresses how to address an object from a higher level to another object, with the last element addressed as the target of the curve. This behavior is like a file system path, so each element is called a “target path”.

When the target path is string or number, it addresses the property of the higher-level object, which itself specifies the property name. Otherwise, the target path must be an object that implements the interface animation.TargetPath.

Cocos Creator has the following built-in classes that implement the interface animation.TargetPath:

  • animation.HierarchyPath treats a higher-level object as a node and addresses one of its children
  • animation.ComponentPath treats a higher-level object as a node and addresses one of its components

The target paths can be any combination, as long as they have the correct meaning:

  1. modifiers: [
  2.     // The target object is the first element of the "names" property of the "BlahBlahComponent" component on the "nested_3" child node of the "nested_2" child node of the "nested_1" child node
  3.     new animation.HierarchyPath('nested_1/nested_2/nested_3'),
  4.     new animation.ComponentPath(js.getClassName(BlahBlahComponent)),
  5.     'names',
  6.     0,
  7. ]

Custom target paths are useful when the target object is not an property, but must be returned from a method:

  1. class BlahBlahComponent extends Component {
  2.     public getName(index: number) { return _names[index]; }
  3.     private _names: string[] = [];
  4. }
  6. modifiers: [
  7.     // The target object is the first "name" of the "BlahBlahComponent" component on the "nested_3" child node of the "nested_2" child node of the "nested_1" child node
  8.     new animation.HierarchyPath('nested_1/nested_2/nested_3'),
  9.     new animation.ComponentPath(js.getClassName(BlahBlahComponent)),
  10.     {
  11.         get: (target: BlahBlahComponent) => target.getName(0),
  12.     },
  13. ]

For custom target paths to be serializable, declare them as classes:

  1. @ccclass
  2. class MyPath implements animation.TargetPath {
  3.     @property
  4.     public index = 0;
  5.     constructor(index: number) { this.index = index; }
  6.     get (target: BlahBlahComponent) {
  7.         return target.getName(this.index);
  8.     }
  9. }
  11. modifiers: [
  12.     // The target object is the first "name" of the "BlahBlahComponent" component on the "nested_3" child node of the "nested_2" child node of the "nested_1" child node
  13.     new animation.HierarchyPath('nested_1/nested_2/nested_3'),
  14.     new animation.ComponentPath(js.getClassName(BlahBlahComponent)),
  15.     new MyPath(0),
  16. ]

The addressing of the target object is done at runtime, a feature that allows animation clips to be reused on multiple objects.

Assignment

When a value is sampled, by default the value will be set to the target object using the assignment operator =.

Sometimes, the assignment operator cannot be used to complete the setting. For example, when setting the Uniform of a material object, it can’t be done with the assignment operator. For this case, the curve field valueAdapter provides a mechanism to customize the value to the target object.

Example:

  1. class BlahBlahComponent {
  2.     public setUniform(index: number, value: number) { /* */ }
  3. }
  5. { // Curve
  6.     valueAdapter: {
  7.         // Called when the curve is instantiated
  8.         forTarget(target: BlahBlahComponent) {
  9.             // Do something useful here
  10.             return {
  11.                 // Called each time the value of the target object is set
  12.                 set(value: number) {
  13.                     target.setUniform(0, value);
  14.                 }
  15.             };
  16.         }
  17.     },
  18. };

For the custom assignment to be serializable, declare them as classes:

  1. @ccclass
  2. class MyValueProxy implements animation.
  3.     @property
  4.     public index: number = 0;
  5.     constructor(index: number) { this.index = index; }
  6.     // Called when the curve is instantiated
  7.     public forTarget(target: BlahBlahComponent) {
  8.         // Do something useful here
  9.         return {
  10.             // Called each time the value of the target object is set
  11.             set(value: number) {
  12.                 target.setUniform(0, value);
  13.             }
  14.         };
  15.     }
  16. }

UniformProxyFactory is one such custom assignment class that implements setting the uniform value of a material:

  1. { 
  2.     modifiers: [
  3.         // The target object is the first material of the "sharedMaterials" property of the "MeshRenderer" component
  4.         ComponentPath(js.getClassName(MeshRenderer)),
  5.         'sharedMaterials',
  6.         0,
  7.     ],
  8.     valueAdapter: new animation.UniformProxyFactory(
  9.         0, // Pass index
  10.         'albedo', // Uniform name
  11.     ),
  12. };

Sampling

If the sampled time point is exactly equal to the time point of a keyframe, then the animation data on that keyframe is used. Otherwise, when the sampling time point is between two frames, the result value is affected by the data of both frames, and the scale of the sampling time point on the moment interval of the two keyframes ([0, 1]) reflects the extent of the effect.

Cocos Creator allows this scale to be mapped to another scale to achieve a different “fade” effect. These mapping methods are called fading methods in Creator. After the scale is determined, the final result is calculated based on the specified interpolation method.

Note: both the fade method and the interpolation method affect the smoothness of the animation.

Fade method

The fade method for each frame can be specified, or a uniform fade method can be used for all frames. The fade method can be the name of a built-in fade method or a Bessel control point.

The following are some of the commonly used fade methods:

  • linear: maintains the original scale, i.e. linear gradient, which is used by default when no gradient is specified
  • constant: always use scale 0, i.e. no gradient, similar to interpolation Step.
  • quadIn: fade from slow to fast
  • quadOut: fade from fast to slow
  • quadInOut: fading from slow to fast to slow again
  • quadOutIn: fade from fast to slow to fast

Expand Comparison

Curve values and interpolation methods

Some interpolation algorithms require additional data to be stored in the curve value for each frame, so the curve value is not necessarily the same as the value type of the target property. For numeric types or value types, Cocos Creator provides several general interpolation methods. Also, it is possible to define custom interpolation methods.

  • When the interpolate property of the curve data is true, the curve will try to use the interpolation function.

    • If the curve value is of type number, Number, linear interpolation will be applied.
    • If the curve value inherits from ValueType, the lerp function of ValueType will be called to complete the interpolation. lerp methods for most value types built into Cocos Creator are implemented as linear interpolation, e.g.: Vec3, vec4, etc.
    • If the curve value is interpolable, the lerp function for the curve value will be called to complete the interpolation1.

  • If the curve value does not satisfy any of the above conditions, or when the interpolate property of the curve data is false, no interpolation will be performed and the curve value from the previous frame will always be used as the result.

    1.   import { AnimationClip, color, IPropertyCurveData, SpriteFrame, Vec3 } from 'cc';
    3.   const animationClip = new AnimationClip();
    5.   const keys = [ 0, 0.5, 1.0, 2.0 ];
    6.   animationClip.duration = keys.length === 0 ? 0 : keys[keys.length - 1];
    7.   animationClip.keys = [ keys ]; // All curves share one column of frame time
    9.   // Linear interpolation using values
    10.   const numberCurve: IPropertyCurveData = {
    11.       keys: 0,
    12.       values: [ 0, 1, 2, 3 ],
    13.       /* interpolate: true, */ // "interpolate" property is on by default
    14.   };
    16.   // Using lerp() of value type Vec3
    17.   const vec3Curve: IPropertyCurveData = {
    18.       keys: 0,
    19.       values: [ new Vec3(0), new Vec3(2), new Vec3(4), new Vec3(6) ],
    20.       interpolate: true,
    21.   };
    23.   // No interpolation (because interpolation is explicitly disabled)
    24.   const colorCuve: IPropertyCurveData = {
    25.       keys: 0,
    26.       values: [ color(255), color(128), color(61), color(0) ],
    27.       interpolate: false, // No interpolation
    28.   };
    30.   // No interpolation (because SpriteFrame cannot be interpolated)
    31.   const spriteCurve: IPropertyCurveData = {
    32.       keys: 0,
    33.       values: [
    34.           new SpriteFrame(),
    35.           new SpriteFrame(),
    36.           new SpriteFrame(),
    37.           new SpriteFrame()
    38.       ],
    39.   };

  • Custom interpolation algorithm

    The sample code is as follows:

    1.   import { ILerpable, IPropertyCurveData, Quat, quat, Vec3, vmath } from 'cc';
    3.   class MyCurveValue implements ILerpable {
    4.       public position: Vec3;
    5.       public rotation: Quat;
    7.       constructor(position: Vec3, rotation: Quat) {
    8.           this.position = position;
    9.           this.rotation = rotation;
    10.       }
    12.       /** This method will be called for interpolation
    13.        * @param this initial curve value
    14.        * @param to target curve value
    15.        * @param t interpolation ratio, in the range [0, 1]
    16.        * @param dt the frame time interval between the starting curve value and the target curve value
    17.        */
    18.       lerp (to: MyCurveValue, t: number, dt: number) {
    19.           return new MyCurveValue(
    20.               // The position property is not interpolated
    21.               this.position.clone(),
    22.               // The rotation property uses Quat's lerp() method
    23.               this.rotation.lerp(to.rotation, t), //
    24.           );
    25.       }
    27.       /** This method is called when not interpolating
    28.        * It is optional, if this method is not defined, then the curve value itself (i.e. this) is used as the result value
    29.        */
    30.       getNoLerp () {
    31.           return this;
    32.       }
    33.   }
    35.   /**
    36.    * Creates a curve that implements a smooth rotation but abrupt position change throughout the cycle.
    37.    */
    38.   function createMyCurve (): IPropertyCurveData {
    39.       const rotation1 = quat();
    40.       const rotation2 = quat();
    41.       const rotation3 = quat();
    43.       vmath.quat.rotateY(rotation1, rotation1, 0);
    44.       vmath.quat.rotateY(rotation2, rotation2, Math.PI);
    45.       vmath.quat.rotateY(rotation3, rotation3, 0);
    47.       return {
    48.           keys: 0 /* frame time */,
    49.           values: [
    50.               new MyCurveValue(new Vec3(0), rotation1),
    51.               new MyCurveValue(new Vec3(10), rotation2),
    52.               new MyCurveValue(new Vec3(0), rotation3),
    53.           ],
    54.       };
    55.   }

Wrap mode

Different wrap modes can be set for Animation Clips by setting AnimationClip.wrapMode. The following lists several common wrap modes:

PropertyDescription
NormalPlayback stops at the end
WrapMode.LoopLoop
PingPongPlay from the beginning to the end of the animation, then play back to the beginning from the end, and so on.

For more wrap modes, please refer to the WrapMode API and the Wrap Mode and Repeat Count documentation.

  1. For numeric, quaternion, and various vectors, Cocos Creator provides the appropriate interpolate classes to implement Cubic Spline Interpolation.↩