Поделиться через

Согласование по времени и реалистичная анимация

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

Примеры

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

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

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

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

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

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

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

Короткое видео, показывающее круг, отображается в правом нижнем углу кадра и останавливается вблизи левого верхнего угла кадра.

Применение упрощения к движениям

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

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

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

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

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

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

замедление упрощения

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

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

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

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

ускорение упрощения