Galacean Logo
Documentation
API Reference
Examples
Playground
Guide and Examples

Animation Transition

This example demonstrates how to achieve animation transitions in the Galacean editor. Through simple steps, you will learn how to transition from one animation to another. If this is your first time using the animation editor, it is recommended to read the previous documents:

1. Play Animation in Model

2. Reuse Animation

0. Preparation

Before starting, we need a model that contains multiple animations. If you don't have a model, you can download the model here.

It is strongly recommended to convert FBX models to GLB/GLTF format using third-party tools such as Blender in actual projects. Galacean currently only supports parsing GLB/GLTF models. Although you can directly drag FBX into the editor for automatic conversion, this may result in large animation data and potential restoration issues. Using professional tools for conversion allows better control over conversion quality and file size.

Import Model

If you are not sure how to import a model, please refer to: Import Model

1. View Model

Click the expand button on the model asset

You can see that the model contains three AnimationClip assets and an AnimatorController asset

2. Create AnimatorController Asset

To control the animation playback of the model, we need to edit the content of the AnimatorController. Since the AnimatorController in the model is read-only, we need to create our own AnimatorController. If you don't know how to create an AnimatorController, please refer to: Create Animator Asset

3. Edit AnimatorController

  1. Open the AnimatorController editor, add three AnimatorState, and bind the three AnimationClips in the model

If you don't know how to create AnimatorState and bind AnimationClips, please refer to: Edit AnimatorController

  1. Create AnimatorStateTransition (for detailed introduction, please refer to the AnimatorStateMachine document): Connect the idle animation to entry, and change the Duration to 0. This way, when the AnimatorController is applied, the character will play the idle animation.
  1. Similarly, connect idle to walk, walk to run, and run to exit. This way, the character will automatically transition from idle to walk, then to run, and finally to exit, re-entering entry to loop the animation.

4. Use AnimatorController and Preview

Bind the AnimatorController (if you don't know how to bind the AnimatorController, please refer to: Use AnimatorController document) and click the play button to see the model transition from idle to walk, then to run, and finally exit, returning to the idle state.

In actual projects, connecting run to idle might be a better choice. This way, after playing the run animation, the character will transition to the idle animation instead of directly replaying. This example is just to demonstrate the effect of exit.

Control Animation with User Input

The above method is mainly for debugging the transition effect of animations. You can modify the transition Duration, ExitTime, Offset, and other parameters (for detailed introduction, please refer to the AnimatorStateMachine document) to adjust to the appropriate transition effect.

In actual projects, animations generally do not switch automatically like in this example. In most cases, user input is needed to control the animation switch. For details, please refer to: Control Animation by User Input document.

Was this page helpful?