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

  • Статья

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

Примеры

Коллекция WinUI

Если у вас установлено приложение из коллекции WinUI 2 , щелкните здесь, чтобы открыть приложение и увидеть функцию "Упрощение функций в действии".

Значения стандартной длительности анимации

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

ThemeResource Name Значение
ControlNormalAnimationDuration 250 мс
ControlFastAnimationDuration 167 мс
ControlFasterAnimationDuration 83 мс

Реалистичная анимация в плавном движении Fluent

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

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

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

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

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

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

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

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

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

замедление замедления

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

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

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

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

ускорение анимации