Адаптивная анимация под устройства

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

Для начала важно понимать единицы измерения в анимациях. Вместо фиксированных пикселей рекомендуется использовать относительные величины, такие как vw, vh или проценты. Это обеспечивает корректное отображение анимаций на разных экранах.

anime({
  targets: '.box',
  translateX: '50vw', 
  duration: 2000,
  easing: 'easeInOutQuad'
});

Здесь 50vw означает 50% ширины видимой области, что автоматически подстраивает движение под размеры экрана.

Использование медиазапросов для анимации

Для более точной адаптации можно сочетать anime.js с JavaScript-медиазапросами через window.matchMedia. Это позволяет менять параметры анимации в зависимости от ширины экрана:

let animationSettings;

if (window.matchMedia("(max-width: 768px)").matches) {
  animationSettings = { translateX: '30vw', duration: 1500 };
} else {
  animationSettings = { translateX: '50vw', duration: 2000 };
}

anime({
  targets: '.box',
  ...animationSettings,
  easing: 'easeOutExpo'
});

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

Динамическая адаптация размеров и позиций

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

anime({
  targets: '.circle',
  translateX: el => el.offsetWidth * 2, // рассчитываем смещение по ширине элемента
  translateY: () => window.innerHeight / 3, // смещение по высоте окна
  scale: el => el.offsetHeight / 50,
  duration: 1800,
  easing: 'easeInOutSine'
});

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

Адаптивные временные параметры

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

const duration = window.innerWidth < 600 ? 800 : 2000;

anime({
  targets: '.menu-item',
  opacity: [0, 1],
  translateY: [-20, 0],
  duration: duration,
  easing: 'easeOutCubic',
  delay: anime.stagger(100)
});

С помощью anime.stagger можно создавать последовательные анимации элементов с адаптивной задержкой, которая также может зависеть от устройства.

Реакция на изменение размеров окна

Для динамической адаптации анимаций при изменении размеров окна стоит использовать обработчик события resize:

let animation;

function startAnimation() {
  if (animation) animation.pause();

  animation = anime({
    targets: '.responsive-box',
    translateX: window.innerWidth / 2,
    translateY: window.innerHeight / 3,
    duration: 1500,
    easing: 'easeInOutQuad'
  });
}

window.addEventListener('resize', startAnimation);
startAnimation();

Это позволяет пересчитывать координаты и размеры объектов при изменении ориентации или ширины экрана.

Интеграция с медиазапросами CSS

Для комплексных интерфейсов можно сочетать CSS-медиазапросы и anime.js. Сначала задаются базовые стили через CSS, а anime.js отвечает за плавное взаимодействие:

.box {
  width: 20vw;
  height: 20vw;
}

@media (max-width: 768px) {
  .box {
    width: 40vw;
    height: 40vw;
  }
}
anime({
  targets: '.box',
  translateX: () => document.querySelector('.box').offsetWidth * 2,
  duration: 1000,
  easing: 'easeOutExpo'
});

Комбинируя CSS и динамические вычисления в JS, анимации становятся максимально адаптивными и отзывчивыми.

Анимации, основанные на скролле и размере экрана

Anime.js хорошо сочетается с библиотеками для скролла, но и самостоятельно можно реализовать адаптивную анимацию, зависящую от прокрутки и размеров окна:

window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  anime({
    targets: '.floating-element',
    translateY: scrollPercent * window.innerHeight,
    scale: 1 + scrollPercent,
    duration: 500,
    easing: 'linear'
  });
});

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

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

  • Использовать относительные единицы (vw, vh, %) для движения и размеров.
  • Функции вместо фиксированных чисел позволяют автоматически адаптировать координаты и масштаб.
  • Медиазапросы и window.matchMedia полезны для кардинальных изменений анимации между мобильными и десктопами.
  • Обработчики resize обеспечивают корректность анимации при изменении размера окна.
  • Комбинирование CSS и JS повышает стабильность адаптивного интерфейса.

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

Оглавление