Deprecated: Phaser 3 API Documentation

Class: Animation

Phaser .Animations. Animation

A Frame based Animation.

Animations in Phaser consist of a sequence of AnimationFrame objects, which are managed by this class, along with properties that impact playback, such as the animations frame rate or delay.

This class contains all of the properties and methods needed to handle playback of the animation directly to an AnimationState instance, which is owned by a Sprite, or similar Game Object.

You don't typically create an instance of this class directly, but instead go via either the AnimationManager or the AnimationState and use their create methods, depending on if you need a global animation, or local to a specific Sprite.

new Animation(manager, key, config)

Parameters:

Name	Type	Description
`manager`	Phaser.Animations.AnimationManager	A reference to the global Animation Manager
`key`	string	The unique identifying string for this animation.
`config`	Phaser.Types.Animations.Animation	The Animation configuration.

Since: 3.0.0
Source: src/animations/Animation.js (Line 15)

Members

delay :number

The delay in ms before the playback will begin.

Type:

number

Since: 3.0.0

Default Value:

Source: src/animations/Animation.js (Line 127)

duration :number

How long the animation should play for, in milliseconds. If the frameRate property has been set then it overrides this value, otherwise the frameRate is derived from duration.

Type:

number

Since: 3.0.0
Source: src/animations/Animation.js (Line 97)

frameRate :number

The frame rate of playback in frames per second (default 24 if duration is null)

Type:

number

Since: 3.0.0

Default Value:

Source: src/animations/Animation.js (Line 87)

frames :Array.<Phaser.Animations.AnimationFrame>

Extract all the frame data into the frames array.

Type:

Array.<Phaser.Animations.AnimationFrame>

Since: 3.0.0
Source: src/animations/Animation.js (Line 73)

hideOnComplete :boolean

Should the GameObject's visible property be set to false when the animation finishes?

Type:

boolean

Since: 3.0.0

Default Value:

false

Source: src/animations/Animation.js (Line 177)

key :string

The unique identifying string for this animation.

Type:

string

Since: 3.0.0
Source: src/animations/Animation.js (Line 54)

manager :Phaser.Animations.AnimationManager

A reference to the global Animation Manager.

Type:

Phaser.Animations.AnimationManager

Since: 3.0.0
Source: src/animations/Animation.js (Line 45)

msPerFrame :number

How many ms per frame, not including frame specific modifiers.

Type:

number

Since: 3.0.0
Source: src/animations/Animation.js (Line 108)

paused :boolean

Global pause. All Game Objects using this Animation instance are impacted by this property.

Type:

boolean

Since: 3.0.0

Default Value:

false

Source: src/animations/Animation.js (Line 187)

repeat :number

Number of times to repeat the animation. Set to -1 to repeat forever.

Type:

number

Since: 3.0.0

Default Value:

Source: src/animations/Animation.js (Line 137)

repeatDelay :number

The delay in ms before the a repeat play starts.

Type:

number

Since: 3.0.0

Default Value:

Source: src/animations/Animation.js (Line 147)

showOnStart :boolean

Should the GameObject's visible property be set to true when the animation starts to play?

Type:

boolean

Since: 3.0.0

Default Value:

false

Source: src/animations/Animation.js (Line 167)

skipMissedFrames :boolean

Skip frames if the time lags, or always advanced anyway?

Type:

boolean

Since: 3.0.0

Default Value:

true

Source: src/animations/Animation.js (Line 117)

type :string

A frame based animation (as opposed to a bone based animation)

Type:

string

Since: 3.0.0

Default Value:

frame

Source: src/animations/Animation.js (Line 63)

yoyo :boolean

Should the animation yoyo (reverse back down to the start) before repeating?

Type:

boolean

Since: 3.0.0

Default Value:

false

Source: src/animations/Animation.js (Line 157)

Methods

addFrame(config)

Add frames to the end of the animation.

Parameters:

Name	Type	Description
`config`	string \| Array.<Phaser.Types.Animations.AnimationFrame>	Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.

Since: 3.0.0
Source: src/animations/Animation.js (Line 258)

Returns:

This Animation object.

Type: Phaser.Animations.Animation

addFrameAt(index, config)

Add frame/s into the animation.

Parameters:

Name	Type	Description
`index`	number	The index to insert the frame at within the animation.
`config`	string \| Array.<Phaser.Types.Animations.AnimationFrame>	Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.

Since: 3.0.0
Source: src/animations/Animation.js (Line 273)

Returns:

This Animation object.

Type: Phaser.Animations.Animation

calculateDuration(target, totalFrames, duration, frameRate)

Calculates the duration, frame rate and msPerFrame values.

Parameters:

Name	Type	Description
`target`	Phaser.Animations.Animation	The target to set the values on.
`totalFrames`	number	The total number of frames in the animation.
`duration`	number	The duration to calculate the frame rate from.
`frameRate`	number	The frame ate to calculate the duration from.

Since: 3.50.0
Source: src/animations/Animation.js (Line 219)

checkFrame(index)

Check if the given frame index is valid.

Parameters:

Name	Type	Description
`index`	number	The index to be checked.

Since: 3.0.0
Source: src/animations/Animation.js (Line 312)

Returns:

true if the index is valid, otherwise false.

Type: boolean

destroy()

Destroys this Animation instance. It will remove all event listeners, remove this animation and its key from the global Animation Manager, and then destroy all Animation Frames in turn.

Since: 3.0.0
Source: src/animations/Animation.js (Line 879)

<protected> getFirstTick(state)

Called internally when this Animation first starts to play. Sets the accumulator and nextTick properties.

Parameters:

Name	Type	Description
`state`	Phaser.Animations.AnimationState	The Animation State belonging to the Game Object invoking this call.

Since: 3.0.0
Source: src/animations/Animation.js (Line 327)

<protected> getFrameAt(index)

Returns the AnimationFrame at the provided index

Parameters:

Name	Type	Description
`index`	number	The index in the AnimationFrame array

Since: 3.0.0
Source: src/animations/Animation.js (Line 345)

Returns:

The frame at the index provided from the animation sequence

Type: Phaser.Animations.AnimationFrame

getFrameByProgress(value)

Returns the frame closest to the given progress value between 0 and 1.

Parameters:

Name	Type	Description
`value`	number	A value between 0 and 1.

Since: 3.4.0
Source: src/animations/Animation.js (Line 485)

Returns:

The frame closest to the given progress value.

Type: Phaser.Animations.AnimationFrame

getFrames(textureManager, frames [, defaultTextureKey])

Creates AnimationFrame instances based on the given frame data.

Parameters:

Name	Type	Argument	Description
`textureManager`	Phaser.Textures.TextureManager		A reference to the global Texture Manager.
`frames`	string \| Array.<Phaser.Types.Animations.AnimationFrame>		Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.
`defaultTextureKey`	string	<optional>	The key to use if no key is set in the frame configuration object.

Since: 3.0.0
Source: src/animations/Animation.js (Line 361)

Returns:

An array of newly created AnimationFrame instances.

Type: Array.<Phaser.Animations.AnimationFrame>

getLastFrame()

Returns the animation last frame.

Since: 3.12.0
Source: src/animations/Animation.js (Line 587)

Returns:

The last Animation Frame.

Type: Phaser.Animations.AnimationFrame

getNextTick(state)

Called internally. Sets the accumulator and nextTick values of the current Animation.

Parameters:

Name	Type	Description
`state`	Phaser.Animations.AnimationState	The Animation State belonging to the Game Object invoking this call.

Since: 3.0.0
Source: src/animations/Animation.js (Line 470)

getTotalFrames()

Gets the total number of frames in this animation.

Since: 3.50.0
Source: src/animations/Animation.js (Line 206)

Returns:

The total number of frames in this animation.

Type: number

nextFrame(state)

Advance the animation frame.

Parameters:

Name	Type	Description
`state`	Phaser.Animations.AnimationState	The Animation State to advance.

Since: 3.0.0
Source: src/animations/Animation.js (Line 502)

pause()

Pauses playback of this Animation. The paused state is set immediately.

Since: 3.0.0
Source: src/animations/Animation.js (Line 849)

Returns:

This Animation object.

Type: Phaser.Animations.Animation

previousFrame(state)

Called internally when the Animation is playing backwards. Sets the previous frame, causing a yoyo, repeat, complete or update, accordingly.

Parameters:

Name	Type	Description
`state`	Phaser.Animations.AnimationState	The Animation State belonging to the Game Object invoking this call.

Since: 3.0.0
Source: src/animations/Animation.js (Line 600)

removeFrame(frame)

Removes the given AnimationFrame from this Animation instance. This is a global action. Any Game Object using this Animation will be impacted by this change.