Easing между keyframes

В anime.js easing определяет темп изменения анимации, то есть как быстро или медленно объект достигает своей целевой позиции на протяжении всего движения. Easing можно применять к отдельным keyframes, создавая сложные эффекты ускорения, замедления или колебаний.

Ключевым понятием является функция easing, которая принимает значение времени от 0 до 1 и возвращает нормализованное значение прогресса анимации. Например, linear — это прямая зависимость, а easeInOutQuad — плавное ускорение и замедление.

anime({
  targets: '.box',
  translateX: [
    { value: 250, duration: 1000, easing: 'easeInQuad' },
    { value: 0, duration: 1000, easing: 'easeOutQuad' }
  ]
});

В этом примере первый keyframe использует ускорение в начале (easeInQuad), а второй — замедление в конце (easeOutQuad).

Применение различных функций easing к keyframes

anime.js предоставляет несколько категорий функций easing:

  1. Linear — равномерное движение, без ускорений и замедлений.

  2. Quad, Cubic, Quart, Quint — полиномиальные функции с различной степенью кривизны.

    • easeInX — движение ускоряется.
    • easeOutX — движение замедляется.
    • easeInOutX — сочетание ускорения и замедления.

  3. Elastic — эффект упругости, объект «прыгает» в конце или начале.

  4. Bounce — имитация отскока.

  5. Back — объект немного «оттягивается» назад перед движением вперед.

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

anime({
  targets: '.circle',
  translateY: [
    { value: 200, duration: 800, easing: 'easeOutBounce' },
    { value: 0, duration: 800, easing: 'easeInElastic(1, .5)' }
  ]
});

В этом примере первая фаза имитирует падение с отскоком, вторая — возврат с упругим эффектом.

Комбинирование easing с процентами keyframes

anime.js позволяет задавать keyframes не только по порядку, но и с указанием процентов анимации. Это важно, когда требуется точный контроль над изменением скорости.

anime({
  targets: '.square',
  keyframes: [
    { translateX: 100, easing: 'easeInQuad', duration: 400 },
    { translateX: 200, easing: 'easeOutQuad', duration: 400 },
    { translateX: 300, easing: 'easeInOutCubic', duration: 400 }
  ]
});

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

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

Кроме встроенных функций, anime.js поддерживает кастомные функции easing. Они принимают параметр t (текущее время в нормализованном виде от 0 до 1) и возвращают значение прогресса:

const customEase = t => t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t;

anime({
  targets: '.triangle',
  translateX: 300,
  duration: 1000,
  easing: customEase
});

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

Советы по управлению easing в сложных анимациях

  • Разделение ключевых фаз. Для длинной анимации лучше разбивать движение на несколько keyframes с разными easing. Это создаёт более естественные переходы.
  • Сочетание физических эффектов. Использование elastic или bounce вместе с easeInOut позволяет добавлять реалистичную физику движения.
  • Контроль времени каждой фазы. Easing работает только в пределах duration keyframe, поэтому точная настройка времени критична для плавности.
  • Комбинация кастомных функций и стандартных. Иногда проще применить простую кривую к первой фазе, а потом подключить кастомную для сложного эффекта.

Практическая реализация сложной последовательности

anime({
  targets: '.path',
  keyframes: [
    { translateX: 150, translateY: 50, easing: 'easeInQuad', duration: 500 },
    { translateX: 300, translateY: 100, easing: 'easeOutBounce', duration: 800 },
    { translateX: 450, translateY: 50, easing: t => t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t, duration: 700 }
  ],
  loop: true
});

Здесь три keyframes создают комплексное движение: ускорение в начале, отскок в середине, уникальная кривая в конце, с повторением цикла. Такой подход демонстрирует весь потенциал easing при работе с keyframes в anime.js.

Оглавление