AnimationClip

AnimationClip (API) is one of the core elements of the Galacean animation system. Galacean supports importing model animations designed with external design software. Each animation in the model output by the designer will be parsed into an AnimationClip asset in Galacean. We can also create additional animations through the animation clip editor.

There are two common ways to obtain AnimationClip:

1. Import models with animations created using third-party tools (such as Autodesk® 3ds Max®, Autodesk® Maya®, Blender), see Creating Animation Clips for Artists for details.

2. Create AnimationClip in Galacean (the following will introduce both editor and script creation methods).

Animation Panel Introduction

The animation clip editor currently supports editing all interpolable properties except for physics-related components. If you need to edit other properties, you need to add the corresponding component to the entity.

Usage Introduction

1. In the Asset Panel, right-click or click + to create an AnimationClip asset.

2. Double-click the AnimationClip asset and select an entity as the editing object of the AnimationClip.

Click the Create button, and the editor will automatically add an Animator (detailed introduction) to your entity and add the AnimationClip to the AnimatorController.

3. Add the properties you want to animate (here I added two).

4. Add keyframes to the properties.

When we click the add keyframe button, the keyframe will store the current value of the specified property. So when we haven't changed anything, the keyframe stores the position value of the entity at this moment. We want it to move to the position (3, 0, 0) after 60 frames, so first modify the cube to (3, 0, 0) through the property panel and then add a keyframe.

Similarly, we also add keyframes for the rotation property.

Recording Mode

We provide a recording mode to facilitate developers to quickly add keyframes. When recording mode is enabled, keyframes will be automatically added when the corresponding property is modified.

Operating Keyframes

Modify Keyframe Time

Select the keyframe and drag it.

You can zoom the timeline by scrolling the mouse wheel.

Modify Keyframe Value

Enable recording mode, move the timeline to the specified keyframe, and then re-enter the value. If recording mode is not enabled, you need to click the add keyframe button again.

Delete Keyframe

Select the keyframe, right-click and select delete, or press the delete key/backspace key on the keyboard.

Editing Child Entities

AnimationClip can not only act on the entity that adds the Animator (detailed introduction), but also on its child entities.

1. Add a child entity to the cube.

2. Click add property, and you can see that the properties of the child entity can be added.

3. Enable recording mode, edit the child entity, and add keyframes.

Editing Animation Curves

The AnimationClip editor supports animation curve editing. Click the curve icon in the upper right corner to switch.

The vertical axis of the curve mode is the value of the property.

You can adjust the vertical axis scale by pressing shift + mouse wheel.

The color of the curve corresponding to the property is the same as the color of the button.

Selecting a keyframe will show two control points. Adjust the control points to adjust the curve.

You can also directly set the built-in preset values by right-clicking the keyframe.

Select the property panel's property to edit only the curve of the specified property.

More Examples

• Text Animation: In addition to the Transform component, Galacean also supports editing animations of other components. You can read the Text Animation document to learn more.
• Frame Animation: In addition to numerical types, Galacean also supports reference type animation curves. You can read the Frame Animation document to learn more.
• Material Animation: Galacean also supports animation editing of asset properties in components. You can read the Material Animation document to learn more.

Script Usage

Before using scripts, it is recommended to read the following documents:

• Script
• Animation System Composition

You can create an AnimationClip (API) yourself and add AnimationCurve (API) to it through the addCurveBinding method.

//custom rotate clip
const rotateClip = new AnimationClip("rotate");
const rotateState =
  animator.animatorController.layers[0].stateMachine.addState("rotate");
rotateState.clip = rotateClip;
 
const rotateCurve = new AnimationVector3Curve();
const key1 = new Keyframe<Vector3>();
key1.time = 0;
key1.value = new Vector3(0, 0, 0);
const key2 = new Keyframe<Vector3>();
key2.time = 10;
key2.value = new Vector3(0, 360, 0);
rotateCurve.addKey(key1);
rotateCurve.addKey(key2);
rotateClip.addCurveBinding("", Transform, "rotation", rotateCurve);
 
//custom color clip
const colorClip = new AnimationClip("color");
const colorState =
  animator.animatorController.layers[0].stateMachine.addState("color");
colorState.clip = colorClip;
 
const colorCurve = new AnimationFloatCurve();
const key1 = new Keyframe<number>();
key1.time = 0;
key1.value = 0;
const key2 = new Keyframe<number>();
key2.time = 10;
key2.value = 1;
colorCurve.addKey(key1);
colorCurve.addKey(key2);
colorClip.addCurveBinding("/light", DirectLight, "color.r", colorCurve);

You can also add AnimationCurve to your child entity /light, as shown in the code example above. At the same time, the third parameter of addCurveBinding is not limited to the properties of the component; it is a path that can index the value.

Animation Events

You can use AnimationEvent to add events to AnimationClip. Animation events will call the specified callback function of the component bound to the same entity at the specified time.

const event = new AnimationEvent();
event.functionName = "test";
event.time = 0.5;
clip.addEvent(event);