Встроенные функции плавности: Quadratic, Cubic, Bounce и др.

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

Важность плавности

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

Основные функции плавности

Babylon.js предоставляет несколько встроенных типов функций плавности, которые можно применить для анимаций. Рассмотрим самые популярные из них.

1. Quadratic (Квадратичная)

Функция Quadratic используется для изменения скорости анимации с квадратичной зависимостью от времени. Это означает, что объект будет начинать движение медленно, ускоряться в середине и замедляться в конце.

const quadraticEasing = new BABYLON.QuadraticEase();
quadraticEasing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
  • EASINGMODE_EASEIN: Объект начинает движение медленно, затем ускоряется.
  • EASINGMODE_EASEOUT: Объект начинает движение быстро, затем замедляется.
  • EASINGMODE_EASEINOUT: Объект сначала замедляется, затем ускоряется, а в конце опять замедляется.

Этот тип плавности хорошо подходит для объектов, движущихся по кривой с плавными изменениями скорости.

2. Cubic (Кубическая)

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

const cubicEasing = new BABYLON.CubicEase();
cubicEasing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
  • EASINGMODE_EASEIN: Объект будет начинать движение медленно, ускоряться с каждым шагом.
  • EASINGMODE_EASEOUT: Начинает движение быстро, замедляется.
  • EASINGMODE_EASEINOUT: Начинает и заканчивает движение медленно, ускоряясь в середине.

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

3. Bounce (Отскок)

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

const bounceEasing = new BABYLON.BounceEase();
bounceEasing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEOUT);

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

4. Sinusoidal (Синусоидальная)

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

const sinusoidalEasing = new BABYLON.SinusoidalEase();
sinusoidalEasing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

Синусоидальная функция плавности позволяет плавно ускорять и замедлять объекты, создавая гармоничные и мягкие переходы.

5. Elastic (Упругая)

Функция Elastic применяет упругие колебания к анимации. Это позволяет создать эффект, при котором объект слегка «отскакивает» перед завершением движения, как если бы он был натянут на пружину. Это придает анимации больше динамики.

const elasticEasing = new BABYLON.ElasticEase();
elasticEasing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
  • EASINGMODE_EASEIN: Объект будет медленно ускоряться, создавая эффект натягивания пружины.
  • EASINGMODE_EASEOUT: Объект будет замедляться, как если бы пружина растягивалась до конца.
  • EASINGMODE_EASEINOUT: Комбинированный режим, который использует как ускорение, так и замедление с эффектом упругости.
6. Back (Обратный)

Функция плавности Back используется для создания анимаций с «помехами», которые приводят к небольшим отклонениям от обычного пути движения. Это позволяет добавить необычные и интересные эффекты, например, когда объект немного отступает перед тем, как продолжить движение.

const backEasing = new BABYLON.BackEase();
backEasing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

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

Использование функций плавности в анимациях

Для того чтобы применить функции плавности в анимациях Babylon.js, нужно использовать анимационные кривые (Animation Curves). Каждая анимация может быть настроена с использованием различных типов плавности, которые влияют на движение объекта по времени. Вот пример применения плавности с анимацией перемещения объекта:

const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
const frameRate = 60;
const duration = 2;
const startPos = box.position;

const animation = new BABYLON.Animation(
  "move",
  "position.x",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

const keyFrames = [
  { frame: 0, value: startPos.x },
  { frame: frameRate * duration, value: startPos.x + 10 },
];

animation.setKeys(keyFrames);
animation.setEasingFunction(new BABYLON.CubicEase());
animation.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

box.animations.push(animation);
scene.beginAnimation(box, 0, frameRate * duration, false);

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

Комбинирование функций плавности

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

const rotateAnimation = new BABYLON.Animation(
  "rotate",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

const rotateKeyFrames = [
  { frame: 0, value: 0 },
  { frame: frameRate * duration, value: Math.PI * 2 },
];

rotateAnimation.setKeys(rotateKeyFrames);
rotateAnimation.setEasingFunction(new BABYLON.ElasticEase());
rotateAnimation.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEOUT);

box.animations.push(rotateAnimation);
scene.beginAnimation(box, 0, frameRate * duration, true);

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

Заключение

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

Оглавление