Длительность анимации

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

Внутри Motion One длительность интерпретируется как часть опций функции animate, а также используется в таймлайнах для синхронизации сложных последовательностей.

Базовая модель duration

Параметр duration описывает время выполнения анимации в секундах. В отличие от многих низкоуровневых API, где время задаётся в миллисекундах, Motion One ориентируется на CSS-подобную модель времени.

Основная форма:

animate(element, { opacity: 1 }, { duration: 0.5 })

Значение 0.5 означает половину секунды. Это упрощает расчёты и делает код ближе к CSS-анимациям.

Возможные варианты задания:

  • 0.2 — 200 миллисекунд
  • 1 — одна секунда
  • 2.5 — две с половиной секунды

Единицы измерения и особенности интерпретации

Motion One принимает длительность в виде числового значения в секундах. При этом важно учитывать, что:

  • дробные значения интерпретируются как доли секунды
  • целые числа автоматически воспринимаются как секунды
  • внутренняя синхронизация с requestAnimationFrame обеспечивает стабильность кадров

Пример последовательного изменения длительности:

animate(box, { x: 200 }, { duration: 0.1 })
animate(box, { x: 0 }, { duration: 1 })

В первом случае движение будет почти мгновенным, во втором — плавным и заметным.

Передача duration в animate

Функция animate принимает объект опций, где duration задаёт временную характеристику всей анимации.

import { animate } from "motion"

animate(".card", {
  transform: "translateY(0px)",
  opacity: 1
}, {
  duration: 0.8
})

В этом примере оба свойства — transform и opacity — синхронно изменяются в течение 0.8 секунды.

Если анимация содержит несколько свойств, duration применяется ко всей группе ключевых кадров, а не к отдельным свойствам.

Влияние duration на keyframes

При использовании ключевых кадров длительность распределяется по всей последовательности значений.

animate(".box", {
  x: [0, 100, 50, 0]
}, {
  duration: 2
})

Здесь вся траектория движения укладывается в 2 секунды. Motion One автоматически интерполирует промежуточные значения между ключевыми точками.

Чем больше длительность:

  • тем более плавной становится интерполяция
  • тем меньше скорость изменения между кадрами
  • тем более выраженной становится «инерция» движения

Duration и временная структура анимации

Длительность влияет не только на скорость, но и на распределение фаз анимации:

  • стартовая фаза (ускорение)
  • основное движение
  • замедление

Хотя сам duration не задаёт кривую движения, он масштабирует эффект easing-функции.

animate(".circle", {
  scale: 1.5
}, {
  duration: 1.2,
  easing: "ease-out"
})

В этом случае easing определяет форму изменения, а duration — её временной масштаб.

Использование duration в timeline

В таймлайнах Motion One длительность становится частью общей композиции анимаций.

import { timeline } from "motion"

timeline([
  [".a", { opacity: 1 }, { duration: 0.3 }],
  [".b", { x: 100 }, { duration: 0.6 }],
  [".c", { scale: 1.2 }, { duration: 1 }]
])

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

При этом общая структура таймлайна формируется суммой и наложением этих значений.

Взаимодействие duration с задержкой и повторением

Хотя duration отвечает только за активную фазу анимации, он часто используется совместно с другими параметрами:

animate(".item", {
  rotate: 180
}, {
  duration: 0.7,
  delay: 0.2,
  repeat: 2
})

В таком случае:

  • duration определяет время одного цикла
  • delay смещает старт
  • repeat умножает общее время выполнения

Итоговое время анимации становится функцией всех трёх параметров.

Практическое влияние длительности на интерфейс

Длительность напрямую влияет на восприятие интерфейса:

Короткие значения (0.1–0.3s):

  • используются для микровзаимодействий
  • подходят для hover-состояний
  • создают эффект мгновенной реакции

Средние значения (0.4–0.8s):

  • применяются для модальных окон
  • подходят для карточек и переходов
  • обеспечивают баланс между скоростью и плавностью

Длинные значения (1s+):

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

Особенности и ограничения

При работе с duration в Motion One важно учитывать несколько технических аспектов:

  • слишком малые значения (< 0.05s) могут визуально игнорироваться из-за ограничений частоты кадров
  • чрезмерно большие значения создают ощущение «замедленного интерфейса»
  • сложные keyframes при большой длительности требуют оптимизации производительности

Также следует учитывать, что длительность не компенсирует неправильный easing: даже идеально подобранное время может выглядеть неестественно при неподходящей кривой движения.

Масштабирование анимаций через duration

Одним из ключевых преимуществ Motion One является возможность легко масштабировать анимации:

const baseDuration = 0.4

animate(".panel", { opacity: 1 }, { duration: baseDuration })
animate(".panel", { x: 100 }, { duration: baseDuration * 1.5 })

Такой подход позволяет поддерживать единый ритм интерфейса, изменяя лишь базовые параметры без переработки всей логики анимации.

Оглавление