Elastic и bounce

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

Параметр easing и его роль

В anime.js параметр easing управляет тем, как значение анимируемого свойства изменяется во времени. Для elastic и bounce это особенно важно, так как они задают динамику движения:

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  easing: 'easeOutElastic(1, .5)'
});

Объяснение параметров elastic:

  • easeOutElastic(amplitude, period) — наиболее популярный вариант.

    • amplitude — амплитуда «прыжка»; чем больше значение, тем сильнее колебания.
    • period — период колебаний; уменьшение этого значения делает анимацию более «быстрой» и частой.

Другие варианты easing:

  • easeInElastic — начинается медленно, с постепенным увеличением скорости и колебаний.
  • easeInOutElastic — комбинирует эффекты easeIn и easeOut, создавая симметричные колебания в начале и в конце анимации.

Пример использования elastic с несколькими элементами

anime({
  targets: '.circle',
  translateY: [
    { value: -100, duration: 1000 },
    { value: 0, duration: 1000 }
  ],
  easing: 'easeOutElastic(1, 0.3)',
  delay: anime.stagger(200)
});
  • anime.stagger(200) создаёт эффект последовательного анимирования элементов с задержкой 200 мс.
  • Колебания создаются только при достижении конечной позиции, что делает движение естественным.

Параметр bounce и особенности движения

bounce моделирует поведение объекта, как будто он падает и отскакивает от поверхности:

anime({
  targets: '.ball',
  translateY: 300,
  duration: 1500,
  easing: 'easeOutBounce'
});

Основные варианты:

  • easeInBounce — объект начинает движение с эффекта «подпрыгивания».
  • easeOutBounce — объект падает и отскакивает в конце анимации.
  • easeInOutBounce — комбинированный эффект начала и конца с подпрыгиваниями.

Комбинирование elastic и bounce

Для создания более сложных анимаций можно комбинировать различные easing-функции:

anime({
  targets: '.mixed',
  translateX: 300,
  translateY: 200,
  duration: 2000,
  easing: 'easeOutElastic(1, 0.5)',
  rotate: '1turn'
});

anime({
  targets: '.mixed',
  translateY: 0,
  duration: 1000,
  easing: 'easeOutBounce'
});
  • Сначала объект движется с эффектом упругости и вращается на 360°.
  • После этого он «падает» с эффектом bounce, создавая реалистичный физический отклик.

Настройка анимации с помощью параметров

elastic и bounce чувствительны к времени и амплитуде:

  • duration — общая длительность анимации, влияет на скорость колебаний.
  • delay — задержка перед стартом, полезна для последовательного анимирования.
  • stagger — распределяет анимацию среди группы элементов, создавая волновой эффект.

Практическое применение

  • UI-эффекты: кнопки, всплывающие окна, индикаторы загрузки.
  • Игровые анимации: прыжки персонажей, падения объектов, реакции на столкновения.
  • Визуальные эффекты: имитация упругого движения элементов в интерфейсе.

Использование elastic и bounce делает интерфейс динамичным и визуально привлекательным, приближая поведение элементов к естественной физике.

Советы по оптимизации

  • Слишком большая амплитуда в elastic может выглядеть неестественно; обычно значение 0.5–1 достаточно.
  • Частые bounce-эффекты на длинных анимациях могут перегружать восприятие; использовать с умеренной частотой.
  • Для сложных последовательностей рекомендуется комбинировать easing с timeline для точного контроля.

Хотите, я могу подготовить отдельную подробную таблицу со всеми вариантами easing elastic и bounce с примерами кода для учебника? Это будет удобно для быстрых ссылок и наглядного изучения.

Оглавление