AnimationGroup: синхронизация нескольких анимаций

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

Основные характеристики и функции AnimationGroup

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

Ключевые возможности:

  • Объединение нескольких анимаций в одном контейнере.
  • Синхронизация анимаций по времени.
  • Управление запуском, паузой и остановкой всех анимаций группы.
  • Изменение скорости анимаций через speedRatio.
  • Управление длительностью и временем начала анимаций.

Создание и использование AnimationGroup

Для создания и использования AnimationGroup необходимо сначала создать анимации и добавить их в группу. Пример простого создания группы:

// Создание сцены и объектов для анимации
let sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
let box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);

// Создание анимации для сферы
let sphereAnimation = new BABYLON.Animation(
  "sphereAnimation", 
  "position.x", 
  30, 
  BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

// Ключевые кадры для анимации сферы
let keys = [
  { frame: 0, value: 0 },
  { frame: 100, value: 10 },
  { frame: 200, value: 0 }
];

sphereAnimation.setKeys(keys);

// Создание анимации для коробки
let boxAnimation = new BABYLON.Animation(
  "boxAnimation", 
  "position.y", 
  30, 
  BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

let boxKeys = [
  { frame: 0, value: 0 },
  { frame: 100, value: 5 },
  { frame: 200, value: 0 }
];

boxAnimation.setKeys(boxKeys);

// Создание AnimationGroup
let group = new BABYLON.AnimationGroup("group");

// Добавление анимаций в группу
group.addAnimation(sphereAnimation);
group.addAnimation(boxAnimation);

// Запуск анимации
group.start(true);

В этом примере создаются две анимации для разных объектов — сферы и коробки. Затем эти анимации добавляются в одну группу, которая управляет их синхронным запуском.

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

SpeedRatio и start()

Параметр speedRatio позволяет управлять скоростью воспроизведения всех анимаций внутри группы. Установка значения speedRatio на 1.0 соответствует нормальной скорости, значение меньше 1 замедляет анимацию, а значение больше 1 — ускоряет.

group.speedRatio = 2; // Ускоряет воспроизведение анимаций в два раза

Метод start() используется для запуска анимации. Если передан параметр true, то анимация будет повторяться по циклу.

group.start(true); // Запуск анимации с повторением

Pause() и Resume()

Методы pause() и resume() позволяют управлять состоянием анимации. Они могут быть полезны, если требуется приостановить анимацию на определённом моменте и затем возобновить её.

group.pause(); // Приостанавливает все анимации в группе
group.resume(); // Возобновляет воспроизведение всех анимаций в группе

Stop()

Метод stop() полностью останавливает анимации, сбрасывая их на начальные позиции.

group.stop(); // Останавливает все анимации в группе

Сложные синхронизации и переходы

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

// Установка времени начала анимации для объектов
sphereAnimation.startFrame = 0;
boxAnimation.startFrame = 50; // Коробка начнёт анимацию через 50 кадров

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

Завершение анимации

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

group.onAnimationGroup End = function () {
  console.log("Все анимации завершены!");
};

Применение и использование в реальных проектах

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

Пример использования AnimationGroup в игре: анимация персонажа может включать несколько компонентов — движение, повороты, анимацию оружия, изменения выражений лица. Все эти анимации могут быть синхронизированы и управляться одним объектом, что облегчает процесс разработки и улучшает производительность.

Оглавление