Duration для отдельных keyframes

В anime.js анимации могут состоять из нескольких ключевых кадров (keyframes), каждый из которых описывает отдельное состояние анимируемого объекта в определённый момент времени. Управление временем выполнения каждого ключевого кадра позволяет создавать более сложные и динамичные эффекты. Параметр duration играет ключевую роль в этом процессе.

Задание длительности для ключевых кадров

Каждый элемент массива keyframes может содержать собственный набор свойств анимации и индивидуальное время выполнения. Стандартная структура ключевого кадра:

{
  value: 100,      // конечное значение свойства
  duration: 500,   // длительность перехода до этого значения (в миллисекундах)
  easing: 'easeInOutQuad' // функция сглаживания для конкретного ключевого кадра
}

Если duration не указан для конкретного ключевого кадра, anime.js использует общую длительность анимации, заданную через duration на уровне всей анимации. Это позволяет комбинировать длинные и короткие переходы внутри одной цепочки keyframes.

Пример использования разных duration для keyframes

anime({
  targets: '.box',
  translateX: [
    { value: 100, duration: 500 },   // быстрый переход
    { value: 200, duration: 1500 },  // медленный переход
    { value: 50, duration: 800 }     // средняя скорость
  ],
  easing: 'linear'
});

В этом примере элемент .box сначала перемещается на 100px за 0.5 секунды, затем медленно до 200px за 1.5 секунды, и обратно на 50px за 0.8 секунды. Каждое значение duration управляет скоростью конкретного шага, независимо от других.

Сочетание с функцией easing

Параметр duration тесно связан с easing. Разные кривые сглаживания могут изменять восприятие скорости:

anime({
  targets: '.circle',
  scale: [
    { value: 1.5, duration: 400, easing: 'easeOutElastic(1, .8)' },
    { value: 1, duration: 600, easing: 'easeInOutQuad' }
  ]
});

Здесь первый ключевой кадр длится 0.4 секунды и создаёт эффект резкого «выброса» с эластичной кривой, второй длится 0.6 секунды и возвращает объект к исходному размеру плавно.

Отдельные длительности для нескольких свойств

Anime.js позволяет анимировать несколько свойств одновременно, каждый с собственной длительностью и easing:

anime({
  targets: '.square',
  keyframes: [
    { translateX: 200, scale: 1.5, duration: 1000 },
    { translateX: 0, scale: 1, duration: 500 }
  ],
  easing: 'easeInOutSine'
});

Если необходимо более тонкое управление, для каждого свойства внутри keyframe можно использовать объект:

anime({
  targets: '.square',
  keyframes: [
    { translateX: { value: 200, duration: 1000 }, scale: { value: 1.5, duration: 1500 } },
    { translateX: { value: 0, duration: 500 }, scale: { value: 1, duration: 700 } }
  ]
});

В этом примере translateX и scale будут изменяться с разными скоростями в рамках одного ключевого кадра.

Динамическое вычисление duration

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

anime({
  targets: '.dot',
  translateY: [
    { value: 100, duration: el => el.dataset.index * 200 },
    { value: 0, duration: el => el.dataset.index * 300 }
  ]
});

Каждый элемент .dot получает уникальное время перехода, зависящее от его data-index.

Важные моменты при работе с duration на уровне keyframes

  • Приоритет ключевых кадров: значение duration в keyframe всегда имеет приоритет над глобальным duration всей анимации.
  • Анимации цепочкой: если несколько keyframes с разными duration следуют друг за другом, anime.js автоматически суммирует их для полной продолжительности анимации.
  • Функции и вычисления: duration может быть функцией, что позволяет создавать адаптивные эффекты, например, задержки и ускорения в зависимости от позиции или состояния элемента.
  • Смешивание easing и duration: комбинируя разные кривые и времена, можно получить эффекты «пульсации», «подпрыгивания», «замедления и ускорения», не создавая сложных таймеров вручную.

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

Для сложных анимаций с множеством keyframes лучше явно задавать duration для каждого шага. Это делает поведение предсказуемым и упрощает синхронизацию с другими эффектами, например, звуковыми или пользовательскими событиями.

Использование отдельных длительностей превращает anime.js из простого инструмента анимации в мощный движок для сложных последовательных и параллельных эффектов.

Оглавление