diff --git a/examples/index.html b/examples/index.html index d302464..7da12a0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -66,7 +66,7 @@

Original GIF

const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document); - const $view = $('#root'); + const $canvas = $('#root'); const $preview = $('#preview'); const $buttons = Array.from($$('button[data-src]')); const $play = $('#play'); @@ -104,9 +104,9 @@

Original GIF

function playAnimation(imageName, imagePath) { clearAnimation(); animation = animations[imageName]; - $view.width = animation.width; - $view.height = animation.height; - app.renderer.resize($view.width, $view.height); + $canvas.width = animation.width; + $canvas.height = animation.height; + app.renderer.resize($canvas.width, $canvas.height); $preview.src = imagePath || imageName; $slider.max = animation.totalFrames - 1; currentAnimation = animation; @@ -131,9 +131,10 @@

Original GIF

await app.init({ width: 476, height: 280, - canvas: $view, + canvas: $canvas, backgroundAlpha: 0, hello: true, + preference: 'webgl', }); const resources = await PIXI.Assets.load(sources); $buttons.forEach($button => diff --git a/src/AnimatedGIF.ts b/src/AnimatedGIF.ts index d2b4997..36ee0b0 100644 --- a/src/AnimatedGIF.ts +++ b/src/AnimatedGIF.ts @@ -259,6 +259,9 @@ class AnimatedGIF extends Sprite { super(Texture.EMPTY); + // Handle rerenders + this.onRender = () => this.updateFrame(); + // Get the options, apply defaults const { scaleMode, width, height, ...rest } = Object.assign({}, AnimatedGIF.defaultOptions, @@ -288,8 +291,6 @@ class AnimatedGIF extends Sprite { this.play(); } - - this.onRender = () => this.updateFrame(); } /** Stops the animation. */