Одновременное изменение нескольких CSS-свойств в Motion One строится вокруг объектного описания конечного состояния и/или набора ключевых кадров. Анимация воспринимает каждое свойство как независимый канал, но синхронизирует их во времени в рамках одного вызова, обеспечивая согласованное поведение трансформаций, прозрачности, цветов и любых поддерживаемых CSS-параметров.
Функция animate принимает объект свойств, где ключи
соответствуют CSS-свойствам или сокращённым трансформациям, а значения
определяют конечное состояние:
import { animate } from "motion";
animate(
".box",
{
opacity: 0,
transform: "translateX(200px)"
},
{
duration: 0.8
}
);Однако Motion One позволяет выражать трансформации не через строку
transform, а через отдельные логические свойства. Это
ключевой механизм, позволяющий анимировать несколько параметров
одновременно без ручной конкатенации CSS.
animate(
".box",
{
x: 200,
y: 100,
rotate: 45,
scale: 1.2,
opacity: 0.5
},
{
duration: 1
}
);Каждое из этих значений интерполируется независимо, но объединяется в единый трансформационный слой браузера, что обеспечивает высокую производительность и отсутствие конфликтов между свойствами.
Motion One разделяет свойства на группы: трансформации, непрозрачность, фильтры и стандартные CSS-параметры. Это позволяет одновременно анимировать разнотипные характеристики без потери синхронности.
animate(
".card",
{
x: 120,
rotate: 10,
opacity: 1,
backgroundColor: "#ff6b6b",
color: "#ffffff"
},
{
duration: 1.2,
easing: "ease-in-out"
}
);В этом случае трансформация (x, rotate) обрабатывается через compositor layer, а цветовые свойства через CSS-переходы внутри анимационного движка Motion One.
Особенность заключается в том, что разработчик не управляет порядком применения свойств: библиотека сама группирует их в оптимальные наборы для браузера.
Ключевые кадры позволяют задавать синхронные изменения сразу нескольких параметров. Каждый ключевой кадр представляет собой снимок состояния объекта.
animate(
".box",
{
opacity: [0, 1, 0.2],
x: [0, 150, 300],
scale: [1, 1.5, 1],
rotate: [0, 180, 360]
},
{
duration: 2,
easing: "ease-in-out"
}
);Здесь все массивы синхронизированы по времени. Первый элемент каждого массива соответствует старту, последний — завершению анимации. Промежуточные значения формируют согласованную траекторию изменения состояния.
Важно, что длина массивов должна совпадать. Если одно из свойств содержит больше ключевых точек, чем другое, Motion One нормализует временную шкалу, что может привести к неочевидным интерполяциям.
Motion One поддерживает интерполяцию чисел, цветов и некоторых строковых значений. Это позволяет комбинировать разнородные свойства в одном вызове.
animate(
".panel",
{
x: [0, 100, 0],
backgroundColor: ["#000000", "#ffcc00", "#3366ff"],
borderRadius: ["0px", "20px", "0px"],
opacity: [1, 0.7, 1]
},
{
duration: 1.5
}
);Цвета интерполируются через RGB- или HSL-пространство в зависимости от контекста, что позволяет получать плавные переходы без резких скачков. Числовые значения обрабатываются линейно или через заданную функцию easing.
Одна из ключевых проблем при работе с CSS — конфликт
transform-строк. При ручной записи каждое новое значение
перезаписывает предыдущее. Motion One решает эту проблему через
декларативное описание отдельных трансформаций.
animate(
".item",
{
x: 100,
scale: 0.8,
rotate: 90
},
{
duration: 1
}
);Внутри библиотека объединяет эти параметры в единый transform-матрикс, предотвращая перезапись. Это особенно важно при композиции сложных анимаций, где разные модули кода могут управлять разными аспектами трансформации.
При анимации нескольких свойств важно понимать, что Motion One не привязывает их к физической модели движения. Каждое свойство интерполируется в рамках общей временной шкалы, но с собственным значением прогрессии.
animate(
".sprite",
{
x: [0, 300],
opacity: [1, 0],
filter: ["blur(0px)", "blur(6px)"]
},
{
duration: 1
}
);Здесь движение, исчезновение и размытие происходят одновременно, но с разной визуальной динамикой. Это позволяет создавать сложные эффекты переходов без необходимости синхронизации вручную.
Функция сглаживания применяется ко всему набору свойств одновременно.
Это означает, что изменение opacity, x и
scale будет подчиняться одной временной кривой.
animate(
".dialog",
{
x: [50, 0],
scale: [0.9, 1],
opacity: [0, 1]
},
{
duration: 0.6,
easing: "cubicBezier(0.2, 0.8, 0.2, 1)"
}
);Использование общей кривой позволяет добиться визуальной согласованности: объект не «разваливается» на отдельные анимационные компоненты, а воспринимается как единая сущность.
Motion One допускает повторные вызовы animate на одном
элементе, где новые свойства дополняют или переопределяют предыдущие.
Это особенно важно при построении интерактивных интерфейсов.
animate(".box", { x: 100, opacity: 1 }, { duration: 1 });
animate(".box", { rotate: 45 }, { duration: 0.5 });Во втором вызове анимация вращения добавляется к уже существующему состоянию без разрушения текущих трансформаций. Это возможно благодаря внутреннему отслеживанию независимых каналов свойств.
При необходимости можно строить более сложные переходы, где одни свойства изменяются быстрее других, используя разные массивы ключевых кадров.
animate(
".figure",
{
x: [0, 200, 400],
scale: [1, 1.2, 1],
opacity: [1, 0.3, 1],
rotate: [0, 90, 180]
},
{
duration: 3
}
);Такой подход позволяет создавать нелинейные визуальные сценарии, где, например, объект сначала увеличивается, затем уменьшается, одновременно проходя через поворот и изменение прозрачности.
Несмотря на одновременную анимацию нескольких параметров, Motion One
оптимизирует выполнение за счёт использования
requestAnimationFrame и группировки изменений. Свойства,
относящиеся к transform, объединяются в единый слой, минимизируя layout
thrashing.
На практике это означает, что увеличение количества анимируемых параметров не приводит к пропорциональному падению производительности, если они относятся к совместимым категориям (transform, opacity).
Комбинация нескольких свойств чаще всего используется для построения интерфейсных переходов: появление модальных окон, карточек, уведомлений и интерактивных панелей.
animate(
".modal",
{
opacity: [0, 1],
scale: [0.8, 1],
y: [40, 0],
filter: ["blur(8px)", "blur(0px)"]
},
{
duration: 0.4,
easing: "ease-out"
}
);Такой набор свойств создаёт эффект «сборки» интерфейса из размытого и уменьшенного состояния в чёткое и стабильное отображение.