Независимые временные настройки для свойств

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

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

Базовый принцип раздельного управления временем

В классическом подходе параметры анимации задаются единым объектом:

import { animate } from "motion";

animate(
  ".box",
  { x: 200, opacity: 1 },
  { duration: 1, ease: "ease-out" }
);

Здесь duration и ease применяются ко всем свойствам одновременно.

Однако Motion One позволяет переопределять временные параметры для каждого свойства отдельно. Это создаёт модель, в которой каждое свойство имеет собственную «скорость развития».

Синтаксис объектного описания временных параметров

Для независимой настройки времени используется объектная форма:

animate(
  ".box",
  {
    x: 300,
    y: 150,
    opacity: 1
  },
  {
    duration: {
      x: 1,
      y: 2,
      opacity: 0.5
    }
  }
);

В этом примере:

  • x завершает движение за 1 секунду
  • y движется медленнее — 2 секунды
  • opacity изменяется быстрее остальных свойств

Такой подход позволяет создавать эффект «разнофазного» движения, где визуальные компоненты элемента распадаются по времени.

Независимые easing-кривые

Помимо длительности, можно управлять функцией плавности отдельно:

animate(
  ".box",
  {
    x: 400,
    scale: 1.5,
    opacity: 0
  },
  {
    ease: {
      x: "ease-out",
      scale: "ease-in-out",
      opacity: "linear"
    }
  }
);

Здесь каждое свойство получает собственную модель ускорения:

  • x — быстро стартует и замедляется к концу
  • scale — симметричное ускорение и замедление
  • opacity — равномерное изменение без ускорений

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

Комбинирование duration, delay и ease

Полноценная независимость достигается при комбинировании всех временных параметров:

animate(
  ".box",
  {
    x: 500,
    y: 200,
    rotate: 180
  },
  {
    duration: {
      x: 1,
      y: 1.5,
      rotate: 2
    },
    delay: {
      x: 0,
      y: 0.2,
      rotate: 0.4
    },
    ease: {
      x: "ease-out",
      y: "ease-in",
      rotate: "ease-in-out"
    }
  }
);

Здесь каждое свойство получает собственный временной «контур»:

  • движение по оси X стартует сразу и заканчивается быстрее остальных
  • Y отстаёт по времени, создавая диагональную траекторию с запаздыванием
  • вращение начинается последним и продолжается дольше всех

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

Интерпретация временных объектов

Motion One интерпретирует объект временных параметров как карту соответствия свойство → значение времени.

Внутри библиотеки это концептуально выглядит так:

property -> duration | delay | ease

Если для свойства значение не задано, используется глобальный fallback:

animate(
  ".box",
  { x: 200, y: 200 },
  {
    duration: {
      x: 1
      // y не задан → используется 1 по умолчанию
    }
  }
);

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

Различие между глобальными и локальными параметрами

Глобальные параметры применяются ко всем свойствам одинаково:

{
  duration: 1,
  ease: "ease-out"
}

Локальные параметры задаются по ключам:

{
  duration: {
    x: 0.5,
    y: 1.5
  }
}

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

Работа с ключевыми кадрами и независимым временем

При использовании массивов значений независимые временные параметры продолжают работать:

animate(
  ".box",
  {
    x: [0, 100, 200],
    opacity: [1, 0.5, 1]
  },
  {
    duration: {
      x: 2,
      opacity: 1
    }
  }
);

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

  • x проходит три ключевые точки за 2 секунды
  • opacity — быстрее, за 1 секунду

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

Асинхронная визуальная динамика

Независимые временные настройки позволяют создавать эффект «разъезда» свойств.

Пример:

animate(
  ".card",
  {
    x: 300,
    scale: 1.2,
    borderRadius: 50
  },
  {
    duration: {
      x: 0.8,
      scale: 1.4,
      borderRadius: 2
    },
    ease: {
      x: "ease-out",
      scale: "ease-in-out",
      borderRadius: "linear"
    }
  }
);

Поведение:

  • смещение происходит мгновенно и резко
  • масштаб изменяется плавно и дольше
  • форма (радиус) трансформируется почти статично, создавая эффект «перетекания» геометрии

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

Конфликты временных параметров

При одновременном задании глобальных и локальных значений действует правило приоритета:

  1. локальные настройки свойства (duration.x)
  2. глобальные настройки (duration)
  3. значения по умолчанию библиотеки

Пример конфликта:

animate(
  ".box",
  { x: 100, y: 100 },
  {
    duration: 2,
    duration: {
      x: 1
    }
  }
);

Результат:

  • x = 1 секунда
  • y = 2 секунды

Практическая модель построения сложных сцен

Независимые временные параметры позволяют отказаться от разбиения анимации на множество вызовов.

Вместо этого создаётся единый декларативный объект:

animate(
  ".panel",
  {
    x: 400,
    opacity: 1,
    scale: 1
  },
  {
    duration: {
      x: 1,
      opacity: 0.6,
      scale: 1.2
    },
    delay: {
      x: 0,
      opacity: 0.1,
      scale: 0.2
    },
    ease: {
      x: "ease-out",
      opacity: "linear",
      scale: "ease-in-out"
    }
  }
);

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

Связь с восприятием движения

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

  • быстрые свойства воспринимаются как «реактивные»
  • медленные — как «инерционные»
  • задержанные — как «вторичные эффекты»

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

Оглавление