PixiJS GIF

Class: AnimatedGIF

AnimatedGIF

Runtime object to play animated GIFs. This object is similar to an AnimatedSprite. It support playback (seek, play, stop) as well as animation speed and looping.

new AnimatedGIF (frames, options)

Name Type Description
frames FrameObject[]

Data of the GIF image.
options Partial<AnimatedGIFOptions> & AnimatedGIFSize

Options for the AnimatedGIF
See:

Extends

  • Sprite

Members

AnimatedGIF.defaultOptions AnimatedGIFOptions static

Default options for all AnimatedGIF objects.

Properties:
Name Type Attributes Default Description
animationSpeed number <optional>
 1

Speed of the animation.
autoPlay boolean <optional>
 true

To start playing right away.
autoUpdate boolean <optional>
 true

Set to false to manage updates yourself.
fps number <optional>
 30

Fallback FPS if GIF contains no time information.
loop boolean <optional>
 true

To enable looping.
onComplete Function <optional>
 null

The completed callback, optional.
onFrameChange Function <optional>
 null

The frame callback, optional.
onLoop Function <optional>
 null

The loop callback, optional.
scaleMode PIXI.SCALE_MODE <optional>
 'linear'

Scale mode to use for the texture.

animationSpeed number

The speed that the animation will play at. Higher is faster, lower is slower.

Default Value:
  • 1

autoPlay boolean readonly

Whether to play the animation after constructing.

Default Value:
  • true

autoUpdate boolean

Whether to use PIXI.Ticker.shared to auto update animation time.

Default Value:
  • true

currentFrame number

Set the current frame number

dirty boolean

Dirty means the image needs to be redrawn. Set to true to force redraw.

Default Value:
  • false

duration number readonly

The total duration of animation in milliseconds.

Default Value:
  • 0

loop boolean

Whether or not the animate sprite repeats after playing.

Default Value:
  • true

onComplete () => void

User-assigned function to call when animation finishes playing. This only happens if loop is set to false.

Example
animation.onComplete = () => {
  // finished!
};

onFrameChange (currentFrame: number) => void

User-assigned function to call when animation changes which texture is being rendered.

Example
animation.onFrameChange = () => {
  // updated!
};

onLoop () => void

User-assigned function to call when loop is true, and animation is played and loops around to start again. This only happens if loop is set to true.

Example
animation.onLoop = () => {
  // looped!
};

playing boolean

true if the current animation is playing

progress number readonly

Get the current progress of the animation from 0 to 1.

totalFrames number

Get the total number of frame in the GIF.

Methods

AnimatedGIF.fromBuffer (buffer, options) AnimatedGIF static

Create an animated GIF animation from a GIF image's ArrayBuffer. The easiest way to get the buffer is to use Assets.

Name Type Attributes Description
buffer ArrayBuffer

GIF image arraybuffer from Assets.
options Partial<AnimatedGIFOptions> <optional>

Options to use.
Returns:
Type Description
AnimatedGIF
Example
 import { Assets } from 'pixi.js';
 import '@pixi/gif';

 const gif = await Assets.load('file.gif');

clone () AnimatedGIF

Cloning the animation is a useful way to create a duplicate animation. This maintains all the properties of the original animation but allows you to control playback independent of the original animation. If you want to create a simple copy, and not control independently, then you can simply create a new Sprite, e.g. const sprite = new Sprite(animation.texture).

The clone will be flagged as dirty to immediatly trigger an update

Returns:
Type Description
AnimatedGIF

destroy () void

Destroy and don't use after this.

play () void

Plays the animation.

stop () void

Stops the animation.

update (deltaTime) void

Updates the object transform for rendering. You only need to call this if the autoUpdate property is set to false.

Name Type Description
deltaTime Ticker

Time since last tick.