Класс AnimatedSprite

AnimatedSprite — это специализированный класс библиотеки PixiJS, предназначенный для создания анимации на основе последовательности текстур. Он наследует функциональность от Sprite и добавляет возможности проигрывания кадров, управления скоростью и цикличностью анимации.

Создание AnimatedSprite

Для создания анимированного спрайта требуется массив текстур:

const textures = [
    PIXI.Texture.from('frame1.png'),
    PIXI.Texture.from('frame2.png'),
    PIXI.Texture.from('frame3.png')
];

const animatedSprite = new PIXI.AnimatedSprite(textures);
  • textures — массив объектов PIXI.Texture. Каждая текстура соответствует одному кадру анимации.
  • Можно использовать спрайт-листы (spritesheets) для оптимизации загрузки большого количества кадров.
PIXI.Loader.shared.add('spritesheet.json').load((loader, resources) => {
    const sheet = resources['spritesheet.json'].spritesheet;
    const anim = new PIXI.AnimatedSprite(sheet.animations['walk']);
});

Основные свойства

  • animationSpeed — скорость анимации в кадрах на тик (по умолчанию 1). Например, animatedSprite.animationSpeed = 0.5 замедлит анимацию в два раза.
  • loop — булевое значение, определяющее, будет ли анимация повторяться. По умолчанию true.
  • playing — показывает текущее состояние воспроизведения.
  • textures — массив кадров анимации. Можно менять динамически для изменения анимации на лету.
  • totalFrames — общее количество кадров в анимации.
  • currentFrame — индекс текущего кадра. Позволяет вручную управлять отображением.

Управление воспроизведением

  • play() — запускает анимацию.
  • stop() — останавливает анимацию на текущем кадре.
  • gotoAndStop(frameNumber) — перемещает к указанному кадру и останавливает анимацию.
  • gotoAndPlay(frameNumber) — перемещает к указанному кадру и продолжает воспроизведение.
animatedSprite.loop = false;
animatedSprite.animationSpeed = 0.3;
animatedSprite.play();

События AnimatedSprite

Класс поддерживает несколько событий для управления анимацией:

  • onComplete — вызывается после завершения воспроизведения анимации (актуально, если loop = false).
  • onFrameChange — срабатывает при смене кадра, передает индекс текущего кадра.
animatedSprite.onCompl ete = () => {
    console.log('Анимация завершена');
};

animatedSprite.onFrameCha nge = (currentFrame) => {
    console.log('Текущий кадр:', currentFrame);
};

Использование спрайт-листов

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

PIXI.Loader.shared.add('character.json').load((loader, resources) => {
    const sheet = resources['character.json'].spritesheet;
    const walk = new PIXI.AnimatedSprite(sheet.animations['walk']);
    const jump = new PIXI.AnimatedSprite(sheet.animations['jump']);
});

Преимущества:

  • Экономия памяти.
  • Оптимизация рендеринга.
  • Легкая смена анимаций на лету через свойство textures.

Управление скоростью и временем анимации

Свойство animationSpeed определяет, как быстро меняются кадры относительно внутреннего тика ticker:

animatedSprite.animationSpeed = 0.5; // Замедление в 2 раза

Для синхронизации с реальным временем можно использовать delta из PIXI.Ticker:

app.ticker.add((delta) => {
    animatedSprite.update(delta);
});

Производительность и оптимизация

  • Анимации с большим количеством кадров могут замедлять рендеринг. Рекомендуется использовать спрайт-листы и минимизировать количество одновременно проигрываемых AnimatedSprite.
  • Свойство autoUpdate (по умолчанию true) позволяет отключить автоматическое обновление кадров, если необходимо контролировать анимацию вручную.
  • Использование текстур с одинаковыми размерами уменьшает накладные расходы GPU.

Применение масок и фильтров

AnimatedSprite полностью поддерживает все возможности Sprite:

  • Маски:
const mask = new PIXI.Graphics();
mask.beginFill(0xffffff);
mask.drawCircle(50, 50, 50);
mask.endFill();
animatedSprite.mask = mask;
  • Фильтры:
const blurFilter = new PIXI.filters.BlurFilter();
animatedSprite.filters = [blurFilter];

Эти инструменты позволяют создавать сложные визуальные эффекты без отдельного рендеринга каждого кадра вручную.

Динамическая смена текстур

Текстуры можно менять в процессе выполнения для создания различных состояний персонажей или объектов:

animatedSprite.textures = sheet.animations['run'];
animatedSprite.play();

Смена текстур автоматически обновляет totalFrames и сбрасывает currentFrame на 0, если не указано иное.

Интеграция с Ticker и сценой

AnimatedSprite можно добавлять в контейнеры и сцены PixiJS, как обычный Sprite:

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

app.stage.addChild(animatedSprite);
animatedSprite.play();

Использование PIXI.Ticker обеспечивает плавное воспроизведение анимации в цикле рендеринга.

Заключение по возможностям

AnimatedSprite — универсальный инструмент для создания 2D анимации в PixiJS, позволяющий:

  • Воспроизводить последовательность кадров с контролем скорости и цикличности.
  • Обрабатывать события окончания анимации и смены кадров.
  • Интегрироваться с спрайт-листами для экономии ресурсов.
  • Использовать маски, фильтры и динамическую смену текстур.

Эти возможности делают его ключевым классом для интерактивных игр и визуальных эффектов на Canvas и WebGL.

Оглавление