mirror of
https://github.com/galacean/engine.git
synced 2026-06-08 00:35:58 +08:00
84 lines
4.9 KiB
Plaintext
84 lines
4.9 KiB
Plaintext
---
|
|
order: 2
|
|
title: AnimatorController
|
|
type: Animation
|
|
label: Animation
|
|
---
|
|
## Introduction
|
|
|
|
The `AnimatorController` ([API](/apis/core/#AnimatorController)) helps you organize a set of animations for a character or other animated object. It visualizes the animation playback logic of animated objects like a flowchart through the `AnimatorStateMachine` ([detailed introduction](/en/docs/animation/state-machine/)) and automatically switches `AnimatorState` and plays the referenced `AnimationClips` ([detailed introduction](/en/docs/animation/clip/)) when conditions are met.
|
|
|
|
### Main Components
|
|
#### AnimatorControllerLayer
|
|
`AnimatorControllerLayer` are used to organize and manage `AnimatorStateMachines` within an `AnimatorController`. Each `AnimatorControllerLayer` has its own `AnimatorStateMachine`. When the `Animator` component runs, all `AnimatorControllerLayer` run simultaneously, and multiple `AnimatorControllerLayer` achieve animation blending through different weights and blending modes. For detailed usage of `AnimatorControllerLayer`, please refer to the [AnimatorControllerLayer](/en/docs/animation/layer/) document.
|
|
|
|
#### AnimatorControllerParameter
|
|
`AnimatorControllerParameter` are used to control the switching of `AnimatorState` in the `AnimatorStateMachine`. When the conditions of the `AnimatorStateTransition` are met by setting the values of the `AnimatorControllerParameter`, the `AnimatorStateTransition` will trigger, switching to the target `AnimatorState`. For detailed usage of `AnimatorControllerParameter`, please refer to the [AnimatorStateMachine](/en/docs/animation/state-machine/) document.
|
|
|
|
## Editor Usage
|
|
|
|
Through the `AnimatorController` editor, users can organize the playback logic of `AnimationClips` ([detailed introduction](/en/docs/animation/clip)).
|
|
|
|
1. Prepare the `AnimationClips` ([detailed introduction](/en/docs/animation/clip)).
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*lq8jQIgm_-cAAAAAAAAAAAAADsJ_AQ/original" />
|
|
|
|
2. To organize the playback of these `AnimationClips`, we need to create an `AnimatorController` asset. There are two ways to create an `AnimatorController`:
|
|
1. Right-click on the blank space in the **[Asset Panel](/en/docs/assets/interface)** and select `Create` -> `Animation Controller`.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*61Q7S62IZxQAAAAAAAAAAAAADsJ_AQ/original" />
|
|
|
|
2. Click the add asset button `+` and select `Animation Controller`.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QqpxS6I9D90AAAAAAAAAAAAADsJ_AQ/original" />
|
|
|
|
3. The newly created `AnimatorController` has no data. We need to edit it, double-click the asset, and add an `AnimatorState` ([detailed introduction](/en/docs/animation/state-machine/#动画状态)).
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*7bZmS4iZ10gAAAAAAAAAAAAADsJ_AQ/original" />
|
|
|
|
4. Click the added `AnimatorState` to bind an `AnimationClip` ([detailed introduction](/en/docs/animation/clip)).
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*xfPTRJg-hOMAAAAAAAAAAAAADsJ_AQ/original" />
|
|
|
|
5. Bind the `AnimatorController` asset to the `Animator` component ([detailed introduction](/en/docs/animation/animator)).
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*H_ShSaWEXtIAAAAAAAAAAAAADsJ_AQ/original" />
|
|
|
|
6. Now you can play the `Idle` animation in the exported project by calling `animator.play("New State")`.
|
|
|
|
<Callout type="info">
|
|
For further usage of the AnimatorController editor, please refer to the [AnimatorStateMachine](/en/docs/animation/state-machine/) document.
|
|
</Callout>
|
|
|
|
## Script Usage
|
|
|
|
Before using scripts, it is recommended to read the following documents:
|
|
|
|
- [Script](/en/docs/script/script)
|
|
- [Animation System Composition](/en/docs/animation/system)
|
|
|
|
### Bind AnimatorController
|
|
|
|
You can bind the `AnimatorController` to the [Animator](/apis/core/#Animator) through the [animator.animatorController](/apis/core/#Animator-animatorController) property.
|
|
|
|
<Callout type="info">
|
|
If the loaded glTF model has animation data, the engine will automatically bind a default `AnimatorController` to each glTF instance, and you can directly use it to play the animations within it.
|
|
</Callout>
|
|
|
|
```typescript
|
|
animator.animatorController = new AnimatorController(engine);
|
|
animator.play("New State");
|
|
```
|
|
|
|
#### Reuse Animation Data
|
|
|
|
The `AnimatorController` is a data storage class and does not contain runtime data. Based on this design, as long as the skeletal node hierarchy and naming of the model bound to the `Animator` component are the same, we can reuse the animation data of this model.
|
|
|
|
```typescript
|
|
const animator = model1.getComponent(Animator);
|
|
// Get the AnimatorController of the animation model
|
|
animator.animatorController = animationGLTF.getComponent(Animator).animatorController;
|
|
// Play the animation of animationGLTF
|
|
animator.play("anim from animationGLTF");
|
|
```
|