Skip to main content
Version: Phaser v4.1.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