Skip to main content
Version: Phaser v4.0.0

AnimationFrame

A single frame within an Animation sequence.

An AnimationFrame holds a reference to the Texture Frame it uses for rendering, links to the previous and next frames in the sequence, its position index, and playback progress data. It can also carry an optional per-frame duration that overrides the parent Animation's default frame rate, and can be flagged as a keyframe to mark significant moments in the sequence.

AnimationFrames are created and managed automatically by the Animation class when an animation is built via the Animation Manager. You would not typically instantiate AnimationFrame directly.

Constructor

new AnimationFrame(textureKey, textureFrame, index, frame, [isKeyFrame])

Parameters

nametypeoptionaldefaultdescription
textureKeystringNoThe key of the Texture this AnimationFrame uses.
textureFramestring | numberNoThe key of the Frame within the Texture that this AnimationFrame uses.
indexnumberNoThe index of this AnimationFrame within the Animation sequence.
framePhaser.Textures.FrameNoA reference to the Texture Frame this AnimationFrame uses for rendering.
isKeyFramebooleanYesfalseIs this Frame a Keyframe within the Animation?

Scope: static

Source: src/animations/AnimationFrame.js#L9
Since: 3.0.0

Public Members

duration

duration: number

Description:

The duration, in ms, of this frame of the animation.

Source: src/animations/AnimationFrame.js#L120
Since: 3.0.0


frame

frame: Phaser.Textures.Frame

Description:

A reference to the Texture Frame this AnimationFrame uses for rendering.

Source: src/animations/AnimationFrame.js#L67
Since: 3.0.0


index

index: number

Description:

The index of this AnimationFrame within the Animation sequence.

Source: src/animations/AnimationFrame.js#L58
Since: 3.0.0


isFirst

isFirst: boolean

Description:

Is this the first frame in an animation sequence?

Source: src/animations/AnimationFrame.js#L76
Since: 3.0.0


isKeyFrame

isKeyFrame: boolean

Description:

Is this Frame a KeyFrame within the Animation?

Source: src/animations/AnimationFrame.js#L143
Since: 3.50.0


isLast

isLast: boolean

Description:

Is this the last frame in an animation sequence?

Source: src/animations/AnimationFrame.js#L87
Since: 3.0.0


nextFrame

nextFrame: Phaser.Animations.AnimationFrame

Description:

A reference to the AnimationFrame that comes after this one in the animation, if any.

Source: src/animations/AnimationFrame.js#L109
Since: 3.0.0


prevFrame

prevFrame: Phaser.Animations.AnimationFrame

Description:

A reference to the AnimationFrame that comes before this one in the animation, if any.

Source: src/animations/AnimationFrame.js#L98
Since: 3.0.0


progress

progress: number

Description:

The normalized progress of this frame within the animation, in the range 0 to 1. A value of 0 means the very start of the animation and 1 means the very end. This value is calculated when the animation is created and cached here.

Source: src/animations/AnimationFrame.js#L130
Since: 3.0.0


textureFrame

textureFrame: string, number

Description:

The key of the Frame within the Texture that this AnimationFrame uses.

Source: src/animations/AnimationFrame.js#L49
Since: 3.0.0


textureKey

textureKey: string

Description:

The key of the Texture this AnimationFrame uses.

Source: src/animations/AnimationFrame.js#L40
Since: 3.0.0


Public Methods

destroy

<instance> destroy()

Description:

Destroys this object by removing references to external resources.

Source: src/animations/AnimationFrame.js#L171
Since: 3.0.0


toJSON

<instance> toJSON()

Description:

Generates a JavaScript object suitable for converting to JSON.

Returns: Phaser.Types.Animations.JSONAnimationFrame - The AnimationFrame data.

Source: src/animations/AnimationFrame.js#L153
Since: 3.0.0