Animatable: запуск, пауза, остановка и скорость

Babylon.js предоставляет мощные инструменты для анимации объектов в 3D-сценах. Одним из таких инструментов является класс Animatable, который предоставляет интерфейс для создания, управления и контроля анимаций. Он поддерживает различные методы для запуска, остановки и управления скоростью анимаций.

Создание анимации

Чтобы создать анимацию с использованием Animatable, необходимо сначала определить анимацию с помощью класса Animation. Анимации в Babylon.js могут быть применены к различным свойствам объектов, таким как позиция, вращение или масштаб. Например, анимация, изменяющая позицию объекта, может быть создана с использованием Animation:

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);

// Создаем анимацию для изменения позиции сферы
const animation = new BABYLON.Animation(
    "moveSphere", // Имя анимации
    "position",   // Свойство, которое будет анимироваться
    30,           // Количество кадров в секунду
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3, // Тип анимации (вектор)
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE // Цикличность анимации
);

// Ключевые кадры для анимации
const keys = [
    { frame: 0, value: new BABYLON.Vector3(0, 0, 0) },  // Начальная позиция
    { frame: 100, value: new BABYLON.Vector3(5, 5, 0) }  // Конечная позиция
];

animation.setKeys(keys);

// Добавляем анимацию к объекту
sphere.animations.push(animation);
scene.beginAnimation(sphere, 0, 100, true);

В данном примере анимация перемещает объект сферы с координат (0, 0, 0) до (5, 5, 0) за 100 кадров. После того как анимация будет добавлена, она сразу начнёт исполняться с помощью метода scene.beginAnimation().

Запуск анимации

После того как анимация добавлена к объекту, её можно запустить с использованием метода scene.beginAnimation. Этот метод позволяет указать объект, начальный и конечный кадры анимации, а также параметры зацикливания.

scene.beginAnimation(sphere, 0, 100, true);

Здесь:

  • sphere — объект, к которому применяется анимация.
  • 0 и 100 — начальный и конечный кадры анимации.
  • true — флаг зацикливания анимации.

Анимации, которые были созданы с помощью Animatable, начинают выполняться автоматически сразу после начала сцены. Важно, что одна и та же анимация может быть применена к нескольким объектам, а также их комбинации могут анимироваться одновременно.

Пауза анимации

Для того чтобы приостановить анимацию, используется метод pause объекта Animatable. Он останавливает выполнение анимации, но сохраняет текущие параметры анимации для последующего возобновления. Например, если анимация сферы была запущена, её можно приостановить следующим образом:

sphere.animations[0].pause();

Этот вызов остановит выполнение анимации на текущем кадре. Важно отметить, что при вызове метода pause анимация не сбрасывается, и её можно будет продолжить с того места, где она была остановлена.

Возобновление анимации

Для возобновления приостановленной анимации используется метод play объекта Animatable. Этот метод возобновляет анимацию с того места, где она была остановлена. Например, чтобы продолжить анимацию сферы после её паузы:

sphere.animations[0].play();

Это обеспечит плавное продолжение анимации без необходимости повторного её запуска с самого начала.

Остановка анимации

Если необходимо полностью остановить анимацию и сбросить её параметры, следует использовать метод stop. При этом анимация будет немедленно прекращена, а объект вернётся в своё начальное состояние. Например:

sphere.animations[0].stop();

После этого анимация больше не будет воспроизводиться, а объект вернется в исходное положение (или будет иметь другие значения, определенные состоянием объекта на момент остановки анимации).

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

Скорость выполнения анимации можно изменять в реальном времени с помощью свойства speedRatio объекта Animatable. Это свойство позволяет увеличить или уменьшить скорость анимации. Например, чтобы удвоить скорость анимации, нужно установить значение speedRatio равным 2:

sphere.animations[0].speedRatio = 2;

Для замедления анимации можно установить значение speedRatio меньше единицы. Например, установка значения 0.5 замедлит анимацию в два раза.

sphere.animations[0].speedRatio = 0.5;

Это свойство позволяет динамически управлять скоростью анимации без необходимости пересоздавать её заново.

Использование Animatable для сложных анимаций

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

const rotationAnimation = new BABYLON.Animation(
    "rotateSphere", 
    "rotation", 
    30, 
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3, 
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

const rotationKeys = [
    { frame: 0, value: new BABYLON.Vector3(0, 0, 0) },
    { frame: 100, value: new BABYLON.Vector3(Math.PI, Math.PI, Math.PI) }
];

rotationAnimation.setKeys(rotationKeys);
sphere.animations.push(rotationAnimation);

// Запуск обеих анимаций
scene.beginAnimation(sphere, 0, 100, true);

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

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

Хотя анимации в Babylon.js очень мощные, важно учитывать влияние их на производительность, особенно если в сцене много объектов с множеством анимаций. В таких случаях стоит оптимизировать использование анимаций, например, уменьшив количество кадров или контролируя частоту обновлений анимации через параметры сцены.

Заключение

Работа с анимациями через Animatable предоставляет богатый набор инструментов для создания интерактивных 3D-сцен. Управление анимациями, такими как запуск, пауза, остановка и изменение скорости, позволяет реализовать различные динамичные и плавные эффекты в сценах Babylon.js.

Оглавление