Spring-анимации

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

В anime.js spring-анимации реализуются через свойства spring, которые задаются внутри объекта анимации. Основные параметры spring-анимации:

  • stiffness – жёсткость пружины. Чем выше значение, тем быстрее объект стремится к целевой позиции.
  • damping – коэффициент демпфирования. Определяет, как быстро затухают колебания.
  • mass – масса объекта, влияющая на инерцию. Большая масса делает движение более «тяжёлым».
  • velocity – начальная скорость объекта, задаваемая числом или массивом чисел для комплексных анимаций.
anime({
  targets: '.box',
  translateX: 300,
  spring: {
    stiffness: 100,
    damping: 10,
    mass: 1
  }
});

В этом примере .box движется к позиции translateX: 300 с эффектом пружины. Колебания будут зависеть от соотношения stiffness и damping.

Настройка поведения колебаний

  • Высокая жёсткость + низкое демпфирование создаёт быстрые колебания с резким возвратом.
  • Низкая жёсткость + высокое демпфирование даёт плавное медленное движение без сильных колебаний.
  • Масса влияет на «тяжесть» движения: высокая масса замедляет ускорение и делает колебания более мягкими.
anime({
  targets: '.circle',
  translateY: 200,
  spring: {
    stiffness: 50,
    damping: 20,
    mass: 2
  }
});

Эта конфигурация создаёт медленное, плавное движение с мягкими колебаниями.

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

Spring-анимации можно применять одновременно к нескольким CSS-свойствам или трансформациям:

anime({
  targets: '.square',
  translateX: 250,
  translateY: 100,
  scale: 1.5,
  rotate: '45deg',
  spring: {
    stiffness: 120,
    damping: 15,
    mass: 1.5
  }
});

Все свойства будут анимироваться с единым физическим поведением. Можно комбинировать линейные easing-анимации с spring-анимациями для достижения сложных эффектов.

Интерактивные spring-анимации

Spring-анимации особенно полезны для создания интерфейсов с интерактивными элементами:

  • Кнопки, реагирующие на наведение или клик
  • Модальные окна с плавным появлением
  • Перетаскиваемые элементы, возвращающиеся в исходное положение
const box = document.querySelector('.draggable');

box.addEventListener('mousedown', () => {
  anime({
    targets: box,
    scale: 1.2,
    spring: {
      stiffness: 200,
      damping: 10
    }
  });
});

box.addEventListener('mouseup', () => {
  anime({
    targets: box,
    scale: 1,
    spring: {
      stiffness: 150,
      damping: 12
    }
  });
});

Такой подход создаёт ощущение живого и отзывчивого интерфейса.

Комбинирование spring-анимаций с timeline

anime.js позволяет включать spring-анимации в timeline для синхронизации сложных последовательностей:

const tl = anime.timeline({
  duration: 800
});

tl.add({
  targets: '.box1',
  translateX: 300,
  spring: { stiffness: 120, damping: 15 }
})
.add({
  targets: '.box2',
  translateY: 150,
  spring: { stiffness: 100, damping: 20 },
  offset: '-=400'
});

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

Советы по оптимизации spring-анимаций

  • Для плавного движения используйте damping выше 10.
  • Не задавайте слишком высокую stiffness, если объект маленький, иначе анимация будет дерганной.
  • Комбинируйте spring с линейной анимацией для сложных интерфейсных эффектов.
  • Используйте массивы значений velocity и mass при работе с несколькими объектами одновременно для создания разнообразных колебаний.

Spring-анимации в anime.js обеспечивают реалистичное и динамичное движение элементов, создавая эффект живой физики на веб-страницах и в интерфейсах.

Оглавление