Пользовательские функции плавности

В библиотеке anime.js для управления поведением анимации используется свойство easing. Оно определяет, как изменяется значение свойства во времени, создавая ощущение ускорения, замедления или специфического ритма движения. Помимо стандартных предустановленных функций (linear, easeInQuad, easeOutCubic и т.д.), anime.js позволяет создавать полностью пользовательские функции плавности, что даёт полный контроль над траекторией анимации.

Пользовательская функция плавности — это функция, принимающая один аргумент t с диапазоном [0,1] и возвращающая значение в том же диапазоне [0,1]. Аргумент t представляет прогресс анимации, где 0 — начало, а 1 — конец. Возвращаемое значение определяет, на какой стадии находится свойство в данный момент.

anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  easing: function(t) {
    return t*t; // квадратичное ускорение
  }
});

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

Сложные кривые и синусоидальные движения

Пользовательские функции плавности могут быть более сложными, включая тригонометрические выражения, экспоненты или комбинированные функции. Например, синусоидальное движение с эффектом “подпрыгивания”:

anime({
  targets: '.ball',
  translateY: 200,
  duration: 1500,
  easing: function(t) {
    return Math.sin(t * Math.PI); // плавное "взлет-падение"
  }
});

Здесь Math.sin(t * Math.PI) создаёт движение, где объект поднимается и возвращается в исходное положение, симулируя подпрыгивание. Такой подход полезен для анимаций персонажей или элементов интерфейса, требующих естественных циклов.

Пользовательские функции с параметрами

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

function bounce(amplitude) {
  return function(t) {
    return Math.abs(Math.sin(6.28 * t) * (1 - t) * amplitude);
  }
}

anime({
  targets: '.circle',
  translateY: 150,
  duration: 2000,
  easing: bounce(1) // регулируем амплитуду подпрыгивания
});

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

Комбинирование стандартных и пользовательских функций

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

function smoothStart(t) {
  return t*t*t; // кубическая кривая ускорения
}

anime({
  targets: '.rect',
  translateX: 400,
  duration: 1800,
  easing: function(t) {
    return smoothStart(t) + 0.1 * Math.sin(t * 10); // добавляем лёгкую вибрацию
  }
});

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

Векторные и многомерные анимации

Для анимаций сразу по нескольким свойствам можно использовать одну функцию плавности, применяемую к каждой координате или значению отдельно:

anime({
  targets: '.star',
  translateX: 300,
  translateY: 200,
  rotate: 360,
  duration: 2500,
  easing: function(t) {
    return t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t; // S-образная кривая
  }
});

Это создаёт сложное S-образное ускорение, где движение сначала ускоряется, затем замедляется. Такой метод полезен для анимации объектов по траекториям или для имитации естественной динамики.

Анимация с обратной связью и динамическая коррекция

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

function dynamicEasing(t, factor) {
  return Math.pow(t, factor); // ускорение зависит от коэффициента
}

let factor = 2.5;

anime({
  targets: '.slider',
  translateX: 500,
  duration: 2000,
  easing: function(t) {
    return dynamicEasing(t, factor);
  }
});

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

Практические советы по созданию пользовательских функций

  • Всегда нормализовать входной и выходной диапазон в [0,1]. Любое значение вне этого диапазона может привести к некорректной анимации.
  • Использовать чистые функции без побочных эффектов для предсказуемого поведения.
  • Для сложных кривых можно комбинировать несколько математических выражений (синусы, экспоненты, полиномы) для создания естественных эффектов.
  • Проверять анимацию визуально, так как небольшие изменения в кривой могут сильно влиять на восприятие движения.
  • Сохранять функции в отдельные переменные или модули для повторного использования и читаемости кода.

Пользовательские функции плавности в anime.js предоставляют полный контроль над динамикой анимации, позволяя создавать уникальные визуальные эффекты, которые невозможно реализовать стандартными easing.

Оглавление