Профилирование анимаций

Основы анимационных профилей

В библиотеке anime.js ключевым понятием является управление изменением свойств объектов с течением времени. Каждое свойство, которое анимируется, может быть описано с помощью профиля, определяющего, как оно изменяется от начального значения к конечному. Профиль анимации управляет темпом изменения, обеспечивая плавность и реалистичность движения.

В anime.js профили задаются через параметр easing. Примеры базовых значений:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'linear' // равномерная скорость
});

Основные типы профилей:

  • linear — равномерное движение от начала до конца.
  • easeIn — замедление в начале.
  • easeOut — замедление в конце.
  • easeInOut — замедление в начале и в конце.

Кастомные функции easing

Помимо стандартных кривых, можно использовать собственные функции:

anime({
  targets: '.box',
  translateX: 400,
  duration: 1500,
  easing: function (t) {
    return t * t; // квадратичное ускорение
  }
});

Функция получает аргумент t — нормализованное время анимации (от 0 до 1) и должна возвращать значение от 0 до 1, определяющее текущую позицию свойства.

Профили с ключевыми кадрами (keyframes)

Для сложных анимаций применяется массив объектов keyframes, где каждый элемент описывает состояние свойства на определённом этапе:

anime({
  targets: '.circle',
  keyframes: [
    { translateX: 100, rotate: '1turn' },
    { translateX: 200, rotate: '-0.5turn' },
    { translateX: 0, rotate: '0turn' }
  ],
  duration: 3000,
  easing: 'easeInOutSine'
});

Особенности профилирования через keyframes:

  • Каждое состояние можно задавать с разным easing.
  • Вызов keyframes позволяет комбинировать движение, вращение, масштаб и прозрачность в единой анимации.
  • Позволяет точно контролировать момент ускорения и замедления на каждом сегменте.

Управление временем через duration и delay

Профиль анимации напрямую зависит от времени её исполнения:

  • duration задаёт общую продолжительность анимации.
  • delay позволяет отложить старт анимации.
  • endDelay добавляет паузу после завершения анимации.

Пример:

anime({
  targets: '.square',
  translateY: 150,
  duration: 2000,
  delay: 500,
  endDelay: 1000,
  easing: 'easeOutExpo'
});

Физические модели профилей: spring и elastic

Anime.js поддерживает профили, имитирующие физическое поведение:

  • spring — движение с имитацией пружины, создаёт колебания.
  • elastic — «упругое» движение, где объект выходит за конечную точку и возвращается.
anime({
  targets: '.ball',
  translateY: 300,
  duration: 1500,
  easing: 'spring(1, 80, 10, 0)' // mass, stiffness, damping, velocity
});

Параметры spring:

  • mass — масса объекта, увеличивает инерцию.
  • stiffness — жёсткость пружины, влияет на скорость колебаний.
  • damping — демпфирование, уменьшает амплитуду.
  • velocity — начальная скорость движения.

Профили для отдельных свойств

Каждое свойство можно анимировать с собственным профилем:

anime({
  targets: '.rectangle',
  translateX: { value: 250, duration: 1000, easing: 'easeOutQuad' },
  rotate: { value: '2turn', duration: 2000, easing: 'easeInOutSine' },
  opacity: { value: 0.5, duration: 500, easing: 'linear' }
});

Это позволяет:

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

Профили повторений и обратного движения

Anime.js позволяет задавать циклы и реверсы, что напрямую влияет на профиль:

  • loop — количество повторов или бесконечный цикл.
  • direction: 'alternate' — смена направления на каждом повторе.
  • autoplay: false — контроль запуска вручную.
anime({
  targets: '.arrow',
  translateX: 300,
  duration: 1000,
  easing: 'easeInOutQuad',
  loop: 3,
  direction: 'alternate'
});

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

Измерение и отладка профилей

Для точной настройки анимаций удобно визуализировать профили с помощью графиков функции easing. Использование дебаггинга через update позволяет отслеживать изменение значений на каждом кадре:

anime({
  targets: '.dot',
  translateY: 200,
  duration: 1200,
  easing: 'easeInOutCubic',
  update: function(anim) {
    console.log(anim.progress, anim.animations[0].currentValue);
  }
});
  • anim.progress — процент выполнения анимации.
  • anim.animations[0].currentValue — текущее значение свойства.

Сочетание профилей с timeline

Для комплексного профилирования применяются таймлайны, где анимации соединяются последовательно или параллельно с индивидуальными easing:

let tl = anime.timeline({ easing: 'easeOutExpo', duration: 1000 });
tl.add({ targets: '.box1', translateX: 250 })
  .add({ targets: '.box2', translateY: 150 }, '-=500') // старт на 500ms раньше
  .add({ targets: '.box3', opacity: 0.5 });

Timeline позволяет:

  • Управлять профилями на уровне последовательностей.
  • Задавать перекрытие и синхронизацию анимаций.
  • Создавать сложные мультитаскинговые эффекты без потери плавности.
Оглавление