Почему PIXI.AnimatedSprite пропускает кадры анимации при первом запуске?

Есть анимация из спрайт листов, созданных через texturePacker. Она запускается, сразу после захода на страницу, но при первом проигрывании анимация пропускает какие-то кадры.

Здесь находятся спрайты анимации

Здесь видео, как это работает

Ниже код, который отвечает за анимацию:

// функция, которая инициализирует PIXI Aplication
init () {
  return new Promise((resolve) => {
    this.app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      transparent: true,
      antialias: true,
      sharedTicker: true
    });

    const wrapper = this.$refs.wheel;
    wrapper.appendChild(this.app.view);

    resolve();
  });
},
    
// Функция, запускающаяся после init();
previewAnimation () {
  const onAssetsLoaded = () => {
    const frames = [];

    for (let i = 0; i < 49; i++) {
      frames.push(PIXI.Texture.from(`${i}.jpg`));
    }
    PIXI.utils.clearTextureCache();

    const anim = new PIXI.AnimatedSprite(frames);
    anim.name = 'preview';

    anim.x = this.app.screen.width / 2;
    anim.y = this.app.screen.height / 2;
    anim.anchor.set(0.5);
    anim.animationSpeed = 0.5;
    anim.loop = false;
    anim.play();

    this.app.stage.addChild(anim);
  };

  this.app.loader
    .add('/sprites/startAnimation/wheel-0.json')
    .load(onAssetsLoaded);
}

Так происходит с любой моей добавленной анимацией. Первый раз проигрывается с пропуском каких-то кадров, дальше уже как по маслу...

В чем может быть причина и что нужно сделать, чтобы кадры перестали пропускаться?


Ответы (0 шт):