# SpriteAnimationClip

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

Source: https://github.com/playcanvas/engine/blob/b5b983982a9860d21e0c1dafb2f85f72e2c01afb/src/framework/components/sprite/sprite-animation-clip.js#L17

Handles playing of sprite animations and loading of relevant sprite assets.

## Constructors

### constructor

```ts
new SpriteAnimationClip(component: SpriteComponent, data: object)
```

Create a new SpriteAnimationClip instance.

**Parameters**

- `component` ([`SpriteComponent`](https://api.playcanvas.com/engine/classes/SpriteComponent.md)): The sprite component managing this clip.
- `data` (`object`): Data for the new animation clip.
    - `data.fps` (`number`, optional): Frames per second for the animation clip.
    - `data.loop` (`boolean`, optional): Whether to loop the animation clip.
    - `data.name` (`string`, optional): The name of the new animation clip.
    - `data.spriteAsset` (`number`, optional): The id of the sprite asset that this clip will play.

## Properties

### fps

```ts
fps: number = 0
```

Frames per second for this animation clip. A negative value plays the animation backwards.

### loop

```ts
loop: boolean = false
```

Whether to loop the animation clip when it reaches the end.

### name

```ts
name: string | undefined
```

The name of this animation clip.

## Accessors

### duration

```ts
get duration(): number
```

Gets the total duration of the animation in seconds.

### frame

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

Gets the index of the frame of the [Sprite](https://api.playcanvas.com/engine/classes/Sprite.md) currently being rendered.

### isPaused

```ts
get isPaused(): boolean
```

Sets whether the animation is currently paused.

### isPlaying

```ts
get isPlaying(): boolean
```

Sets whether the animation is currently playing.

### sprite

```ts
get sprite(): Sprite
set sprite(value: Sprite)
```

Gets the current sprite used to play the animation.

### spriteAsset

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

Gets the id of the sprite asset used to play the animation.

### time

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

Gets the current time of the animation in seconds.

## Methods

### pause

```ts
pause(): void
```

Pauses the animation.

### play

```ts
play(): void
```

Plays the animation. If it's already playing then this does nothing.

### resume

```ts
resume(): void
```

Resumes the paused animation.

### stop

```ts
stop(): void
```

Stops the animation and resets the animation to the first frame.

## Events

### EVENT_END

```ts
static EVENT_END: string = 'end'
```

Fired when the clip stops playing because it reached its end.

**Example**

```ts
clip.on('end', () => {
    console.log('Clip ended');
});
```

### EVENT_LOOP

```ts
static EVENT_LOOP: string = 'loop'
```

Fired when the clip reached the end of its current loop.

**Example**

```ts
clip.on('loop', () => {
    console.log('Clip looped');
});
```

### EVENT_PAUSE

```ts
static EVENT_PAUSE: string = 'pause'
```

Fired when the clip is paused.

**Example**

```ts
clip.on('pause', () => {
    console.log('Clip paused');
});
```

### EVENT_PLAY

```ts
static EVENT_PLAY: string = 'play'
```

Fired when the clip starts playing.

**Example**

```ts
clip.on('play', () => {
    console.log('Clip started playing');
});
```

### EVENT_RESUME

```ts
static EVENT_RESUME: string = 'resume'
```

Fired when the clip is resumed.

**Example**

```ts
clip.on('resume', () => {
    console.log('Clip resumed');
});
```

### EVENT_STOP

```ts
static EVENT_STOP: string = 'stop'
```

Fired when the clip is stopped.

**Example**

```ts
clip.on('stop', () => {
    console.log('Clip stopped');
});
```

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

- `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`