Phaser Class: Animation

new Animation(game, parent, name, frameData, frames, frameRate, loop, loop)

An Animation instance contains a single animation and the controls to play it. It is created by the AnimationManager, consists of Animation.Frame objects and belongs to a single Game Object such as a Sprite.

Parameters:

Name	Type	Argument	Default	Description
`game`	Phaser.Game			A reference to the currently running game.
`parent`	Phaser.Sprite			A reference to the owner of this Animation.
`name`	string			The unique name for this animation, used in playback commands.
`frameData`	Phaser.FrameData			The FrameData object that contains all frames used by this Animation.
`frames`	Array.<number> \| Array.<string>			An array of numbers or strings indicating which frames to play in which order.
`frameRate`	number	<optional>	60	The speed at which the animation should play. The speed is given in frames per second.
`loop`	boolean	<optional>	false	Whether or not the animation is looped or just plays once.
`loop`	boolean			Should this animation loop when it reaches the end or play through once.

Source:

animation/Animation.js, line 22

Members

currentFrame

Properties:

Name	Type	Description
`currentFrame`	Phaser.Frame	The currently displayed frame of the Animation.

Source:

animation/Animation.js, line 125

delay

Properties:

Name	Type	Description
`delay`	number	The delay in ms between each frame of the Animation, based on the given frameRate.

Source:

animation/Animation.js, line 58

enableUpdate

Properties:

Name	Type	Description
`enableUpdate`	boolean	Gets or sets if this animation will dispatch the onUpdate events upon changing frame.

Source:

animation/Animation.js, line 704

frame

Properties:

Name	Type	Description
`frame`	number	Gets or sets the current frame index and updates the Texture Cache for display.

Source:

animation/Animation.js, line 643

<readonly> frameTotal

Properties:

Name	Type	Description
`frameTotal`	number	The total number of frames in the currently loaded FrameData, or -1 if no FrameData is loaded.

Source:

animation/Animation.js, line 630

game

Properties:

Name	Type	Description
`game`	Phaser.Game	A reference to the currently running Game.

Source:

animation/Animation.js, line 29

isFinished

Properties:

Name	Type	Description
`isFinished`	boolean	The finished state of the Animation. Set to true once playback completes, false during playback.

Default Value:

false

Source:

animation/Animation.js, line 80

isPaused

Properties:

Name	Type	Description
`isPaused`	boolean	The paused state of the Animation.

Default Value:

false

Source:

animation/Animation.js, line 92

isPlaying

Properties:

Name	Type	Description
`isPlaying`	boolean	The playing state of the Animation. Set to false once playback completes, true during playback.

Default Value:

false

Source:

animation/Animation.js, line 86

killOnComplete

Properties:

Name	Type	Description
`killOnComplete`	boolean	Should the parent of this Animation be killed when the animation completes?

Default Value:

false

Source:

animation/Animation.js, line 74

loop

Properties:

Name	Type	Description
`loop`	boolean	The loop state of the Animation.

Source:

animation/Animation.js, line 63

loopCount

Properties:

Name	Type	Description
`loopCount`	number	The number of times the animation has looped since it was last started.

Source:

animation/Animation.js, line 68

name

Properties:

Name	Type	Description
`name`	string	The user defined name given to this Animation.

Source:

animation/Animation.js, line 46

onComplete

Properties:

Name	Type	Description
`onComplete`	Phaser.Signal	This event is dispatched when this Animation completes playback. If the animation is set to loop this is never fired, listen for onAnimationLoop instead.

Source:

animation/Animation.js, line 141

onLoop

Properties:

Name	Type	Description
`onLoop`	Phaser.Signal	This event is dispatched when this Animation loops.

Source:

animation/Animation.js, line 146

onStart

Properties:

Name	Type	Description
`onStart`	Phaser.Signal	This event is dispatched when this Animation starts playback.

Source:

animation/Animation.js, line 130

onUpdate

Properties:

Name	Type	Description
`onUpdate`	Phaser.Signal \| null	This event is dispatched when the Animation changes frame. By default this event is disabled due to its intensive nature. Enable it with: `Animation.enableUpdate = true`.

Default Value:

null

Source:

animation/Animation.js, line 136

paused

Properties:

Name	Type	Description
`paused`	boolean	Gets and sets the paused state of this Animation.

Source:

animation/Animation.js, line 596

speed

Properties:

Name	Type	Description
`speed`	number	Gets or sets the current speed of the animation in frames per second. Changing this in a playing animation will take effect from the next frame. Minimum value is 1.

Source:

animation/Animation.js, line 681

Methods

<static> generateFrameNames(prefix, start, stop, suffix, zeroPad) → {array}

Really handy function for when you are creating arrays of animation data but it's using frame names and not numbers. For example imagine you've got 30 frames named: 'explosion0001-large' to 'explosion_0030-large' You could use this function to generate those by doing: Phaser.Animation.generateFrameNames('explosion', 1, 30, '-large', 4);

Parameters:

Name	Type	Argument	Default	Description
`prefix`	string			The start of the filename. If the filename was 'explosion0001-large' the prefix would be 'explosion'.
`start`	number			The number to start sequentially counting from. If your frames are named 'explosion_0001' to 'explosion_0034' the start is 1.
`stop`	number			The number to count to. If your frames are named 'explosion_0001' to 'explosion_0034' the stop value is 34.
`suffix`	string	<optional>	''	The end of the filename. If the filename was 'explosion_0001-large' the prefix would be '-large'.
`zeroPad`	number	<optional>	0	The number of zeroes to pad the min and max values with. If your frames are named 'explosion_0001' to 'explosion_0034' then the zeroPad is 4.

Source:

animation/Animation.js, line 732

Returns:

An array of framenames.

Type: array

complete()

Called internally when the animation finishes playback. Sets the isPlaying and isFinished states and dispatches the onAnimationComplete event if it exists on the parent and local onComplete event.

Source:

animation/Animation.js, line 569

destroy()

Cleans up this animation ready for deletion. Nulls all values and references.

Source:

animation/Animation.js, line 541

next(quantity)

Advances by the given number of frames in the Animation, taking the loop value into consideration.

Parameters:

Name	Type	Argument	Default	Description
`quantity`	number	<optional>	1	The number of frames to advance.

Source:

animation/Animation.js, line 430

onPause()

Called when the Game enters a paused state.

Source:

animation/Animation.js, line 328

onResume()

Called when the Game resumes from a paused state.

Source:

animation/Animation.js, line 342

play(frameRate, loop, killOnComplete) → {Phaser.Animation}

Plays this animation.

Parameters:

Name	Type	Argument	Default	Description
`frameRate`	number	<optional>	null	The framerate to play the animation at. The speed is given in frames per second. If not provided the previously set frameRate of the Animation is used.
`loop`	boolean	<optional>	false	Should the animation be looped after playback. If not provided the previously set loop value of the Animation is used.
`killOnComplete`	boolean	<optional>	false	If set to true when the animation completes (only happens if loop=false) the parent Sprite will be killed.

Source:

animation/Animation.js, line 156

Returns:

A reference to this Animation instance.

Type: Phaser.Animation

previous(quantity)

Moves backwards the given number of frames in the Animation, taking the loop value into consideration.

Parameters:

Name	Type	Argument	Default	Description
`quantity`	number	<optional>	1	The number of frames to move back.

Source:

animation/Animation.js, line 479

restart()

Sets this animation back to the first frame and restarts the animation.

Source:

animation/Animation.js, line 214

setFrame(frameId, useLocalFrameIndex)

Sets this animations playback to a given frame with the given ID.

Parameters:

Name	Type	Argument	Default	Description
`frameId`	string \| number	<optional>		The identifier of the frame to set. Can be the name of the frame, the sprite index of the frame, or the animation-local frame index.
`useLocalFrameIndex`	boolean	<optional>	false	If you provide a number for frameId, should it use the numeric indexes of the frameData, or the 0-indexed frame index local to the animation.

Source:

animation/Animation.js, line 239

stop(resetFrame, dispatchComplete)

Stops playback of this animation and set it to a finished state. If a resetFrame is provided it will stop playback and set frame to the first in the animation. If dispatchComplete is true it will dispatch the complete events, otherwise they'll be ignored.

Parameters:

Name	Type	Argument	Default	Description
`resetFrame`	boolean	<optional>	false	If true after the animation stops the currentFrame value will be set to the first frame in this animation.
`dispatchComplete`	boolean	<optional>	false	Dispatch the Animation.onComplete and parent.onAnimationComplete events?

Source:

animation/Animation.js, line 297

update()

Updates this animation. Called automatically by the AnimationManager.

Source:

animation/Animation.js, line 356

updateFrameData(frameData)

Changes the FrameData object this Animation is using.

Parameters:

Name	Type	Description
`frameData`	Phaser.FrameData	The FrameData object that contains all frames used by this Animation.

Source:

animation/Animation.js, line 528