Словами самого skill
Справочник по принципам моушен-дизайна для дизайнеров и разработчиков, анимирующих интерфейсы. Он отталкивается от трёх опор — эмоционального замысла, визуального нарратива и мастерства движения — а затем уточняет каждое решение через один из четырёх «характеров» движения (Playful, Premium, Corporate, Energetic), каждый со своими фиксированными диапазонами длительности, кривыми easing и процентами overshoot.
Готовые рецепты охватывают нажатие кнопки, появление карточки, «тряску» при успехе и ошибке — их дополняют таблицы длительности по типам элементов, правила направленного easing, хореография и бюджеты stagger, карта соответствия эмоций движению и весовые классы. Рекомендации выражены в цифрах, значениях по умолчанию и ограничениях, применимых к любой анимационной системе, которую вы уже используете.
Что он выдаёт
- Три константы бренд-моушена, которые нужно задать: сигнатурный easing, палитру длительностей и паттерн появления
- Готовые спецификации cubic-bezier, взятые из платформенных стандартов
- Многошаговые рецепты паттернов с тайминга��и по шагам, например продолжение движения после нажатия кнопки
Как это работает
- 01Сначала определите три опоры
Определите эмоциональный замысел, визуальную микро-историю и мастерство, делающее движение убедительным, прежде чем выбирать тайминг или кривую.
- 02Зафиксируйте один архетип характера
Выберите один архетип — Playful, Premium, Corporate или Energetic — и удерживайте его на протяжении всего проекта, поскольку у каждого свой диапазон длительности, кривая easing и overshoot.
- 03Используйте минимум работающих свойств
Таблицы свойств связывают каждую цель эффекта с основным свойством и опциональными дополнительными: одно свойство воспринимается как прямое, два — как отточенное, три и более рискуют перегрузить зрителя.
- 04Масштабируйте длительность по дистанции
Начните с длительности для типа элемента, затем растяните её в зависимости от дистанции перемещения: 100px — база, 200px становится 1.3x, 400px становится 1.6x.
- 05Easing по направлению
Появления замедляются по кривой семейства ease-out, поэтому движение начинается быстро и мягко приземляется.