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:
  • 0
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:
  • 24
Source: src/animations/Animation.js (Line 87)

frames :Array.<Phaser.Animations.AnimationFrame>

Extract all the frame data into the frames array.

Type:
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:
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:
  • 0
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:
  • 0
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.

Parameters:
Name Type Description
frame Phaser.Animations.AnimationFrame

The AnimationFrame to be removed.

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

This Animation object.

Type
Phaser.Animations.Animation

removeFrameAt(index)

Removes a frame from the AnimationFrame array at the provided index and updates the animation accordingly.

Parameters:
Name Type Description
index number

The index in the AnimationFrame array

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

This Animation object.

Type
Phaser.Animations.Animation

repeatAnimation(state)

Called internally during playback. Forces the animation to repeat, providing there are enough counts left in the repeat counter.

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 705)
Fires:

resume()

Resumes playback of this Animation. The paused state is reset immediately.

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

This Animation object.

Type
Phaser.Animations.Animation

toJSON()

Converts the animation data to JSON.

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

The resulting JSONAnimation formatted object.

Type
Phaser.Types.Animations.JSONAnimation

updateFrameSequence()

Called internally whenever frames are added to, or removed from, this Animation.

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

This Animation object.

Type
Phaser.Animations.Animation