Класс Animation: типы данных и режимы интерполяции

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

Анимации в Babylon.js можно применять к различным типам данных. Все они делятся на несколько категорий, в зависимости от типа изменяемого свойства:

  1. Позиция (Position) Позиция объекта на сцене задается тремя координатами: x, y и z. Анимация позиции позволяет изменять местоположение объекта в пространстве, например, перемещать его по траектории или в пределах заданных ограничений.

  2. Вращение (Rotation) Вращение объекта определяется тремя углами (pitch, yaw, roll), или эквивалентно — углами Эйлера. Анимация вращения позволяет изменять ориентацию объекта по осям. Это может быть полезно, например, для создания эффектов вращения или вращающихся объектов в пространстве.

  3. Масштаб (Scaling) Масштаб объекта задается тремя значениями, которые контролируют размеры объекта по осям x, y и z. Анимация масштаба позволяет изменять размер объекта, что часто используется для создания эффектов увеличения или уменьшения.

  4. Цвет (Color) Цвет объектов анимируется с помощью RGBA значений. В Babylon.js это часто используется для анимации материалов или освещения. Цвет можно анимировать, меняя его значения от одного состояния к другому.

  5. Скаляры (Scalar values) Анимации могут быть также применены к любым числовым значениям (например, интенсивности света, прозрачности материалов и т. п.). Это позволяет анимировать параметры, которые имеют одно значение, например, яркость света или степень прозрачности материала.

  6. Векторные данные (Vector values) Векторы — это тип данных, состоящий из нескольких числовых значений, например, для анимации направлений вектора или позиции объекта. В Babylon.js можно анимировать векторные данные, такие как вектор направления для освещения или вектор нормали.

Режимы интерполяции

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

  1. Линейная интерполяция (Linear Interpolation) Это самый простой и часто используемый метод интерполяции. При линейной интерполяции изменения происходят с постоянной скоростью от начального значения до конечного. Линейная интерполяция подходит для большинства базовых анимаций, когда нужно, чтобы изменение происходило равномерно.

    Пример:

    const animation = new BABYLON.Animation(
  "moveAnimation", 
  "position.x", 
  30, 
  BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);
const keys = [
  { frame: 0, value: 0 },
  { frame: 100, value: 10 }
];
animation.setKeys(keys);

  2. Интерполяция с кривой Безье (Bezier Interpolation) Этот режим позволяет создавать более сложные анимации с плавными переходами между ключевыми кадрами. Кривые Безье контролируют скорость изменения на разных участках анимации, обеспечивая замедление или ускорение в зависимости от настроек. Это может быть полезно для создания более естественных движений, таких как анимации объектов, плавно ускоряющихся или замедляющихся.

    Пример:

    animation.setKeys([
  { frame: 0, value: 0 },
  { frame: 50, value: 5, inTangent: -1, outTangent: 1 },
  { frame: 100, value: 10 }
]);

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

    Пример:

    animation.setKeys([
  { frame: 0, value: 0 },
  { frame: 50, value: 5 },
  { frame: 100, value: 10 }
]);
animation.setEasingFunction(new BABYLON.EaseInEaseOut());

  4. Интерполяция с постоянной скоростью (Constant Speed Interpolation) Этот режим позволяет объекту двигаться с постоянной скоростью, независимо от того, сколько времени проходит между ключевыми кадрами. Это может быть полезно, если необходимо, чтобы объект двигался с фиксированной скоростью, например, при движении с равномерной скоростью по траектории.

    Пример:

    animation.setKeys([
  { frame: 0, value: 0 },
  { frame: 100, value: 10 }
]);
animation.setInterpolationType(BABYLON.Animation.INTERPOLATION_MODE_CONSTANT);

  5. Ускорение и замедление (Ease In, Ease Out) Эти типы интерполяции позволяют задавать анимацию, в которой изменение значения начинается с замедления, а затем ускоряется (EaseIn), или наоборот — начинает движение быстро, а затем замедляется в конце (EaseOut). Эти эффекты часто используются для создания анимаций объектов, которые начинают двигаться медленно, а затем ускоряются или наоборот.

    Пример:

    const easeIn = new BABYLON.EaseIn();
animation.setEasingFunction(easeIn);

Управление анимациями

Библиотека Babylon.js предоставляет полный набор инструментов для управления анимациями. Вы можете контролировать как начало, так и конец анимации, а также ее поведение в течение времени.

  • Запуск анимации: Анимация запускается с помощью метода beginAnimation(), который позволяет задать объект и параметры анимации, такие как скорость и количество повторений.

    Пример:

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

  • Остановка анимации: Для остановки анимации можно использовать метод stopAnimation(). Это полезно, когда необходимо прекратить анимацию до того, как она завершится по времени.

    Пример:

    scene.stopAnimation(mesh);

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

    Пример:

    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE // Анимация будет повторяться

  • Продолжительность и скорость: Для изменения продолжительности или скорости анимации можно регулировать такие параметры, как скорость кадров и общее время анимации.

Заключение

Класс Animation в Babylon.js предоставляет мощные инструменты для создания разнообразных анимаций объектов в 3D-пространстве. Использование различных типов данных и режимов интерполяции позволяет создавать как простые, так и сложные анимации, которые могут быть использованы для визуализации, динамических эффектов и улучшения взаимодействия с пользователем.

Оглавление