# AnimComponent

Class · extends [`Component`](https://api.playcanvas.com/engine/classes/Component.md) · category: Animation

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/framework/components/anim/component.js#L54

The AnimComponent enables an [Entity](https://api.playcanvas.com/engine/classes/Entity.md) to play back animations on models and entity
properties. Animations are driven by animation state graphs, which can be authored in the
PlayCanvas Editor or constructed programmatically, and support blending between multiple
layers and clips.

You should never need to use the AnimComponent constructor directly. To add an AnimComponent
to an [Entity](https://api.playcanvas.com/engine/classes/Entity.md), use [Entity#addComponent](https://api.playcanvas.com/engine/classes/Entity.md#addcomponent):

```javascript
const entity = new Entity();
entity.addComponent('anim', {
    activate: true,
    speed: 1
});
```

Once the AnimComponent is added to the entity, you can access it via the [Entity#anim](https://api.playcanvas.com/engine/classes/Entity.md#anim)
property:

```javascript
entity.anim.speed = 2; // Play animations at double speed

console.log(entity.anim.speed); // Get the playback speed and print it
```

Relevant Engine API examples:

- [1D Blend Trees](https://playcanvas.github.io/#/animation/blend-trees-1d)
- [2D Cartesian Blend Trees](https://playcanvas.github.io/#/animation/blend-trees-2d-cartesian)
- [2D Directional Blend Trees](https://playcanvas.github.io/#/animation/blend-trees-2d-directional)
- [Animation Events](https://playcanvas.github.io/#/animation/events)
- [Component Properties](https://playcanvas.github.io/#/animation/component-properties)
- [Layer Masks](https://playcanvas.github.io/#/animation/layer-masks)
- [Locomotion](https://playcanvas.github.io/#/animation/locomotion)

## Accessors

### activate

```ts
get activate(): boolean
set activate(value: boolean)
```

Gets whether the first animation will begin playing when the scene is loaded.

### baseLayer

```ts
get baseLayer(): AnimComponentLayer | null
```

Returns the base layer of the state graph.

### layers

```ts
get layers(): readonly AnimComponentLayer[]
```

Returns the animation layers available in this anim component. Use addLayer or loadStateGraph
to change layers.

### normalizeWeights

```ts
get normalizeWeights(): boolean
set normalizeWeights(value: boolean)
```

Gets whether the animation component will normalize the weights of its layers by their sum total.

### playable

```ts
get playable(): boolean
```

Returns whether all component layers are currently playable.

### playing

```ts
get playing(): boolean
set playing(value: boolean)
```

Gets whether to play or pause all animations in the component.

### rootBone

```ts
get rootBone(): Entity
set rootBone(value: Entity)
```

Gets the entity that this anim component should use as the root of the animation hierarchy.

### speed

```ts
get speed(): number
set speed(value: number)
```

Gets the speed multiplier for animation play back speed.

## Methods

### addLayer

```ts
addLayer(name: string, weight?: number, mask?: any[], blendType?: string): AnimComponentLayer
```

Adds a new anim component layer to the anim component.

**Parameters**

- `name` (`string`): The name of the layer to create.
- `weight` (`number`, optional): The blending weight of the layer. Defaults to 1.
- `mask` (`any[]`, optional): A list of paths to bones in the model which should be animated in
  this layer. If omitted the full model is used. Defaults to null.
- `blendType` (`string`, optional): Defines how properties animated by this layer blend with
  animations of those properties in previous layers. Defaults to ANIM_LAYER_OVERWRITE.

**Returns** [`AnimComponentLayer`](https://api.playcanvas.com/engine/classes/AnimComponentLayer.md): The created anim component layer.

### assignAnimation

```ts
assignAnimation(nodePath: string, animTrack: AnimTrack, layerName?: string, speed?: number, loop?: boolean): void
```

Associates an animation with a state or blend tree node in the loaded state graph. If all
states are linked and the [activate](https://api.playcanvas.com/engine/classes/AnimComponent.md#activate) value was set to true then the component will
begin playing. If no state graph is loaded, a default state graph will be created with a
single state based on the provided nodePath parameter.

**Parameters**

- `nodePath` (`string`): Either the state name or the path to a blend tree node that this
  animation should be associated with. Each section of a blend tree path is split using a
  period (`.`) therefore state names should not include this character (e.g "MyStateName" or
  "MyStateName.BlendTreeNode").
- `animTrack` ([`AnimTrack`](https://api.playcanvas.com/engine/classes/AnimTrack.md)): The animation track that will be assigned to this state and
  played whenever this state is active.
- `layerName` (`string`, optional): The name of the anim component layer to update. If omitted the
  default layer is used. If no state graph has been previously loaded this parameter is
  ignored.
- `speed` (`number`, optional, default `1`): Update the speed of the state you are assigning an animation to.
  Defaults to 1.
- `loop` (`boolean`, optional, default `true`): Update the loop property of the state you are assigning an
  animation to. Defaults to true.

### findAnimationLayer

```ts
findAnimationLayer(name: string): AnimComponentLayer
```

Finds an [AnimComponentLayer](https://api.playcanvas.com/engine/classes/AnimComponentLayer.md) in this component.

**Parameters**

- `name` (`string`): The name of the anim component layer to find.

**Returns** [`AnimComponentLayer`](https://api.playcanvas.com/engine/classes/AnimComponentLayer.md): Layer.

### getBoolean

```ts
getBoolean(name: string): boolean
```

Returns a boolean parameter value by name.

**Parameters**

- `name` (`string`): The name of the boolean to return the value of.

**Returns** `boolean`: A boolean.

### getFloat

```ts
getFloat(name: string): number
```

Returns a float parameter value by name.

**Parameters**

- `name` (`string`): The name of the float to return the value of.

**Returns** `number`: A float.

### getInteger

```ts
getInteger(name: string): number
```

Returns an integer parameter value by name.

**Parameters**

- `name` (`string`): The name of the integer to return the value of.

**Returns** `number`: An integer.

### getTrigger

```ts
getTrigger(name: string): boolean
```

Returns a trigger parameter value by name.

**Parameters**

- `name` (`string`): The name of the trigger to return the value of.

**Returns** `boolean`: A boolean.

### loadStateGraph

```ts
loadStateGraph(stateGraph: any): void
```

Initializes component animation controllers using the provided state graph.

**Parameters**

- `stateGraph` (`any`): The state graph asset to load into the component. Contains the
  states, transitions and parameters used to define a complete animation controller.

**Example**

```ts
entity.anim.loadStateGraph({
    "layers": [
        {
            "name": layerName,
            "states": [
                {
                    "name": "START",
                    "speed": 1
                },
                {
                    "name": "Initial State",
                    "speed": speed,
                    "loop": loop,
                    "defaultState": true
                }
            ],
            "transitions": [
                {
                    "from": "START",
                    "to": "Initial State"
                }
            ]
        }
    ],
    "parameters": {}
});
```

### rebind

```ts
rebind(): void
```

Rebind all of the components layers.

### removeNodeAnimations

```ts
removeNodeAnimations(nodeName: string, layerName?: string): void
```

Removes animations from a node in the loaded state graph.

**Parameters**

- `nodeName` (`string`): The name of the node that should have its animation tracks removed.
- `layerName` (`string`, optional): The name of the anim component layer to update. If omitted the
  default layer is used.

### removeStateGraph

```ts
removeStateGraph(): void
```

Removes all layers from the anim component.

### reset

```ts
reset(): void
```

Reset all of the components layers and parameters to their initial states. If a layer was
playing before it will continue playing.

### resetTrigger

```ts
resetTrigger(name: string): void
```

Resets the value of a trigger parameter that was defined in the animation components state
graph to false.

**Parameters**

- `name` (`string`): The name of the parameter to set.

### setBoolean

```ts
setBoolean(name: string, value: boolean): void
```

Sets the value of a boolean parameter that was defined in the animation components state
graph.

**Parameters**

- `name` (`string`): The name of the parameter to set.
- `value` (`boolean`): The new boolean value to set this parameter to.

### setFloat

```ts
setFloat(name: string, value: number): void
```

Sets the value of a float parameter that was defined in the animation components state graph.

**Parameters**

- `name` (`string`): The name of the parameter to set.
- `value` (`number`): The new float value to set this parameter to.

### setInteger

```ts
setInteger(name: string, value: number): void
```

Sets the value of an integer parameter that was defined in the animation components state
graph.

**Parameters**

- `name` (`string`): The name of the parameter to set.
- `value` (`number`): The new integer value to set this parameter to.

### setTrigger

```ts
setTrigger(name: string, singleFrame?: boolean): void
```

Sets the value of a trigger parameter that was defined in the animation components state
graph to true.

**Parameters**

- `name` (`string`): The name of the parameter to set.
- `singleFrame` (`boolean`, optional, default `false`): If true, this trigger will be set back to false at the end
  of the animation update. Defaults to false.

## Inherited from [Component](https://api.playcanvas.com/engine/classes/Component.md)

- `entity: Entity`
- `system: ComponentSystem`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`