Встроенные easing-функции

В библиотеке anime.js easing-функции используются для управления темпом анимации. Они определяют, как значения свойств изменяются во времени, создавая эффект ускорения, замедления или комбинированного движения. Каждая easing-функция задаёт кривую, которая преобразует линейное прогрессирование времени в плавное изменение значения.

Типы встроенных easing-функций

anime.js поставляется с широким набором предопределённых функций easing. Основные категории:

  1. Линейные (Linear)

    • 'linear' – постоянная скорость от начала до конца анимации. Применение:
    anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'linear'
});

  2. Классические ускорения/замедления (Quadratic, Cubic, Quartic, Quintic) Каждая функция задаёт кривую степени N, влияя на скорость движения:

    • 'easeInQuad', 'easeOutQuad', 'easeInOutQuad'
    • 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'
    • 'easeInQuart', 'easeOutQuart', 'easeInOutQuart'
    • 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'

    Пояснение:

    • easeIn* – плавное начало, ускорение к концу.
    • easeOut* – быстрое начало, плавное завершение.
    • easeInOut* – комбинированное ускорение и замедление.

    Пример использования:

    anime({
  targets: '.circle',
  scale: 2,
  duration: 1200,
  easing: 'easeInOutCubic'
});

  3. Elastic (упругие) функции

    • 'easeInElastic', 'easeOutElastic', 'easeInOutElastic' Добавляют эффект пружины: объект сначала проходит через целевое значение, возвращается назад и постепенно стабилизируется.
    anime({
  targets: '.spring',
  translateY: 200,
  duration: 1500,
  easing: 'easeOutElastic'
});

  4. Bounce (отскок)

    • 'easeInBounce', 'easeOutBounce', 'easeInOutBounce' Имитируют падение и отскок объекта, создавая реалистичный физический эффект.
    anime({
  targets: '.ball',
  translateY: 300,
  duration: 1000,
  easing: 'easeOutBounce'
});

  5. Back (с «перелётом») функции

    • 'easeInBack', 'easeOutBack', 'easeInOutBack' Движение выходит за конечную точку и возвращается, создавая эффект «пробега за пределы».
    anime({
  targets: '.arrow',
  translateX: 150,
  duration: 800,
  easing: 'easeOutBack'
});

Использование кастомизации easing

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

anime({
  targets: '.elastic-box',
  translateX: 250,
  duration: 2000,
  easing: 'easeOutElastic(1, .5)'
});
  • Первый параметр (1) – амплитуда колебаний.
  • Второй параметр (0.5) – период колебаний.

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

Применение easing к сложным анимациям

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

anime({
  targets: '.stagger-box div',
  translateY: 200,
  duration: 1000,
  delay: anime.stagger(100),
  easing: 'easeInOutQuart'
});
  • anime.stagger() позволяет применять задержку для последовательного движения элементов.
  • Единая easing-функция обеспечивает плавность всей анимации, несмотря на последовательность.

Практические советы

  • Выбор easing по задаче:

    • Простое линейное перемещение – 'linear'.
    • Эффект мягкого старта и окончания – 'easeInOut*'.
    • Имитация физики – 'easeOutBounce', 'easeOutElastic'.
    • Эффект «выстрела» – 'easeOutBack'.

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

anime({
  targets: '.multi',
  translateX: {
    value: 300,
    duration: 1200,
    easing: 'easeInQuad'
  },
  rotate: {
    value: 360,
    duration: 1200,
    easing: 'easeOutBack'
  }
});
  • Тестирование кривых: Использование визуальных инструментов типа easings.net помогает подобрать подходящую функцию для желаемого движения.

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

Оглавление