Словами самого skill
Apple Design перерабатывает выступления Apple о интерфейсах на WWDC, в первую очередь Designing Fluid Interfaces (WWDC 2018), в правила для создания плавных, физичных веб-интерфейсов. Он предназначен для дизайнеров и разработчиков, работающих с интерфейсами на основе жестов: перетаскивание, свайпы, шиты, пружины, инерция, прерываемые переходы, полупрозрачные материалы и глубина, типографика (оптический размер, трекинг, интерлиньяж) и поведение при сниженной анимации.
Сквозная идея в том, что движение должно начинаться от текущего значения на экране, наследовать скорость пользователя, проецировать инерцию вперёд и быть управляемым и обратимым в любой момент. Пружины заменяют анимации с фиксированной длительностью, потому что они изначально прерываемы и учитывают скорость, а skill завершается восемью принципами дизайна Apple, используемыми как общий словарь.
Что он выдаёт
- CSS для обратной связи при нажатии, масштабирующий элемент управления при :active с переходом ease-out 100 мс.
- Вызовы spring-анимации, показывающие рядом критически затухающий вариант по умолчанию и вариант с инерционным отскоком.
- Хелпер project(), реализующий проекцию инерции с decelerationRate по умолчанию 0.998.
- CSS для сниженной прозрачности, заменяющий полупрозрачные панели инструментов сплошным фоном без размытия.
Как это работает
- 01Реагировать на pointer-down
Обратная связь относится к нажатию, а не к отпусканию: выделяйте элемент управления в момент нажатия и относитесь к любой несущественной задержке на пути ввода, включая ~300 мс задержку тапа, как к регрессии.
- 02Отслеживать указатель 1:1
Используйте Pointer Events с захватом (capture), чтобы отслеживание сохранялось даже при выходе указателя за границы элемента, и учитывайте точку, за которую пользователь взялся, а не привязывайтесь к центру элемента.
- 03Сделайте движение прерываемым
Движущийся элемент должен быть доступен для захвата и разворота на лету; пользователь никогда не должен ждать завершения текущей анимации, чтобы перенаправить её.
- 04Моделируйте движение с помощью пружин
Пружина воспринимает новый ввод, просто меняя цель, поэтому движение остаётся непрерывным; у скриптов с фиксированной длительностью нет цели для повторного назначения.
- 05Передавайте скорость отпускания
Передавайте пружине скорость указателя в момент отпускания, чтобы не было разрыва между перетаскиванием и анимацией; нормализуйте по оставшемуся расстоянию, если API требует относительную скорость.
- 06Прогнозируйте инерцию, затем привязывайте
Не привязывайтесь к точке, где палец отпустил элемент; спроецируйте позицию покоя так, как это делало бы затухание при скролле, и выберите точку привязки, ближайшую к этой проекции.