Тайминг и плавность анимации

Хотя движение основано в реальном мире, мы также являемся цифровой средой, что подразумевает ожидание скорости и производительности.

Примеры

Откройте приложение коллекции WinUI 3 и просмотрите функции упрощения в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Стандартные значения длительности анимации

WinUI 3 предоставляет набор стандартных продолжительностей анимации, которые используются во всех элементах управления платформы. Эти именованные ресурсы вы также можете использовать при создании пользовательских анимаций раскадровки (Storyboard).

Имя ThemeResource	Значение
СтандартнаяДлительностьАнимацииУправления	250 мс
УправлениеПродолжительностьюБыстройАнимации	167 мс
УправлениеПродолжительностьюБыстройАнимации	83 мс

Упрощение в движении Fluent

Упрощение — это способ управления скоростью объекта по мере перемещения. Это "клей", который связывает все элементы взаимодействия Fluent. Хотя это крайнее, плавность, используемая в системе, помогает объединить ощущение физической реальности объектов, движущихся по всей системе. Это один из способов имитировать реальный мир и сделать так, чтобы движущиеся объекты казались частью своей среды.

Применение плавности к движению

Эти облегчения помогут вам достичь более естественного чувства, и являются базовыми мы используем для движения Fluent.

Быстрый выход, медленный вход

cubic-bezier(0, 0, 0, 1)

Используется для объектов или пользовательского интерфейса, входящих в сцену, навигации или создания.

При прибытии на место объект сталкивается с крайне высоким трением, что замедляет объект до состояния покоя. Результатом является то, что объект перемещался с большого расстояния и вошел на огромной скорости, или быстро возвращается в состояние покоя.

Даже если это предшествует моменту нереспонсивности, скорость входящего объекта создает ощущение быстроты и отзывчивости.

Медленный выход, быстрый вход

cubic-bezier(1 , 0 , 1 , 1)

Используйте для пользовательского интерфейса или объектов, покидающих сцену.

Объекты получают энергию и импульс, пока они не достигают первой космической скорости. Результатом является то, что объект старается уйти с пути пользователя и освободить место для нового контента.

Связанные статьи

• Обзор движения
• Fluent Design - Движение
• Направление и гравитация