Словами самого skill
Этот skill проектирует и реализует микровзаимодействия, motion-дизайн, переходы и паттерны обратной связи для повышения удобства использования и удовольствия пользователей. Он даёт конкретные рекомендации по тайминговым: 100-150 мс для микрообратной связи, например наведения и кликов, 200-300 мс для небольших переходов, таких как переключатели и выпадающие списки, 300-500 мс для средних переходов, включая модальные окна и смену страниц, и 500 мс и более для сложных хореографированных анимаций.
Skill охватывает состояния загрузки со skeleton-экранами и индикаторами прогресса, жестовые взаимодействия, такие как swipe-to-dismiss, переходы между страницами и паттерны обратной связи, например эффекты ripple. Он подчёркивает осмысленное движение, которое информирует, а не украшает, используя четыре принципа: обратная связь для подтверждения действий, ориентация для показа перемещения элементов, фокус для направления внимания и непрерывность для сохранения контекста во время переходов.
Что он выдаёт
- Микровзаимодействия кнопок с наведением, нажатием и пружинными анимациями
- Skeleton-экраны с пульсирующей анимацией для состояний загрузки
- Компоненты переключателей с плавными пружинными переходами состояний
- Переходы между страницами с изменением прозрачности и вертикальным смещением с использованием AnimatePresence
Как это работает
- 01Следуйте тайминговым рекомендациям в зависимости от масштаба взаимодействия
Используйте 100-150 мс для микрообратной связи, например наведений и кликов, 200-300 мс для небольших переходов, таких как переключатели, 300-500 мс для средних переходов, таких как модальные окна, и 500 мс и более для сложных анимаций.
- 02Выбирайте подходящие функции плавности (easing)
Используйте ease-out (замедление) для появляющихся элементов, ease-in (ускорение) для исчезающих элементов, ease-in-out для перехода между состояниями и spring для игривых эффектов с перелётом.
- 03Учитывайте настройки доступности
Проверяйте медиазапрос prefers-reduced-motion и уменьшайте длительность анимаций до 0.01ms, если пользователь запросил сокращение движения — это гарантирует, что анимации не вызовут дискомфорт.