Системы дизайна уже используют токены для цвета, интервалов и типографики. Токены движения применяют ту же идею к анимации. Они превращают такие решения, как «маленькие элементы перемещаются быстро и мягко» в именованные значения, которые использует каждый дизайнер и разработчик.
Типичный набор включает в себя продолжительность (короткую, среднюю, длинную), кривые ослабления (стандартные, вход, выход) и, во все большей степени, пружины, определяемые жесткостью, демпфированием и массой. Пружины популярны, потому что они кажутся естественными и хорошо справляются с прерываниями в коде.
Именование имеет значение. Имена, основанные на назначении, такие как motion.enter или motion.emphasis, легче применять правильно, чем необработанные числа. Пусть набор будет небольшим. Если каждый компонент получит свою собственную кривую, токены перестанут выполнять свою работу.
Доступность также относится к токенам. Определите, что происходит, когда пользователь включает уменьшенное движение, например, более короткие затухания вместо большого движения, чтобы каждый компонент обрабатывал это одинаково.
Токены обычно хранятся в JSON и преобразуются в переменные CSS, Swift, Kotlin или JavaScript с помощью инструмента создания токенов. Наш бесплатный генератор токенов движения создает стартовый набор, который вы можете адаптировать.