Скорость анимации animationSpeed

В PixiJS объект AnimatedSprite используется для воспроизведения последовательности кадров в формате спрайт-листа. Одним из ключевых параметров управления воспроизведением анимации является свойство animationSpeed, которое определяет скорость смены кадров.

Свойство animationSpeed

Синтаксис:

sprite.animationSpeed = 0.5;
  • Тип значения: Number
  • Диапазон: Обычно положительные числа; значения меньше 1 замедляют анимацию, значения больше 1 ускоряют её.
  • По умолчанию: 1 — стандартная скорость, при которой каждый кадр воспроизводится один раз за цикл таймера движка.

Значение animationSpeed выражается в фракциях кадров в тик. Например, значение 0.5 означает, что каждый кадр будет проигрываться два тика, а значение 2 — каждый кадр будет проигрываться дважды за один тик.

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

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

const animSprite = new PIXI.AnimatedSprite(textureArray);

// Установка скорости анимации
animSprite.animationSpeed = 0.75;

// Запуск анимации
animSprite.play();
app.stage.addChild(animSprite);

В этом примере скорость анимации установлена ниже стандартной, что создаёт эффект более медленного воспроизведения.

Динамическое изменение скорости

Свойство animationSpeed можно изменять в процессе работы приложения, что позволяет создавать эффекты ускорения или замедления анимации:

app.ticker.add((delta) => {
    animSprite.animationSpeed = 0.5 + Math.sin(app.ticker.lastTime / 1000);
});

Здесь скорость анимации будет плавно изменяться во времени, создавая эффект «дыхания» или пульсации движения.

Взаимодействие с методом play() и stop()

  • Метод play() запускает анимацию с текущей скоростью, установленной в animationSpeed.
  • Метод stop() останавливает воспроизведение, сохраняя текущий кадр.
  • Можно комбинировать изменения animationSpeed с play() для временного ускорения или замедления:
animSprite.animationSpeed = 2;
animSprite.play();

setTimeout(() => {
    animSprite.animationSpeed = 0.25;
}, 2000);

После 2 секунд анимация резко замедлится.

Влияние на производительность

Высокие значения animationSpeed увеличивают частоту смены кадров, что может влиять на производительность при работе с большим количеством анимаций одновременно. Для оптимизации следует:

  • Использовать оптимизированные спрайт-листы с минимальным количеством кадров.
  • Подбирать значение animationSpeed с учётом цикла рендера приложения (например, синхронизация с app.ticker).

Соотношение с ticker и deltaTime

PixiJS использует объект Ticker для обновления анимаций. Свойство animationSpeed умножается на deltaTime, передаваемое в колбэк тикера:

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

Если скорость анимации не изменяется, можно полагаться на стандартный вызов play(). Для динамических эффектов animationSpeed в сочетании с deltaTime позволяет добиться плавного воспроизведения независимо от производительности устройства.

Резюме ключевых моментов

  • animationSpeed — основное средство контроля скорости анимации у AnimatedSprite.
  • Значение меньше 1 замедляет анимацию, больше 1 ускоряет.
  • Поддерживает динамическое изменение во время воспроизведения.
  • Влияет на частоту смены кадров и нагрузку на рендеринг.
  • Сочетается с методами play() и stop(), а также с Ticker для тонкой настройки движения.

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

Оглавление