Анимации в Windows app

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

Ниже приведены 3 способа применения принципов движения Fluent в приложении.

  • Неявная анимация
    Автоматическое изменение настроек и времени между значениями в параметре для достижения очень простого движения Fluent с помощью стандартных значений.
  • Встроенная анимация
    Системные компоненты, такие как общие элементы управления и совместное движение, являются "Fluent по умолчанию". Основы применяются в соответствии с их подразумеваемым использованием.
  • Настраиваемая анимация в соответствии с рекомендациями руководств
    Иногда может возникнуть ситуация, когда система еще не предоставляет точное решение для перемещения для вашего сценария. В этих случаях используйте основные рекомендации в качестве отправной точки для вашего опыта.

Пример перехода

функциональная анимация

Направление вперед наружу:
Плавное исчезновение: 150 м; Смягчение: ускорение по умолчанию в направлении вперед:
Слайд вверх на 150 пикселей: 300 мс; Интерполяция: замедление по умолчанию

Направление назад и наружу:
Скользить вниз на 150 пикселей: 150 мс; Плавность: Ускорение по умолчанию Направление назад внутрь:
Исчезает в: 300 мс; Упрощение: замедление по умолчанию

Пример объекта

300 мс движение

Расширение направления:
Рост: 300 мс; Ускорение: стандартное

Контракт на управление:
Рост: 150 мс; Смягчение: стандартное ускорение

Неявные анимации

Неявные анимации — это простой способ достичь движения Fluent путем автоматической интерполяции между старыми и новыми значениями во время изменения параметра.

Откройте приложение WinUI 3 Gallery и увидите неявные переходы в действии

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

Можно неявно анимировать изменения в следующих свойствах:

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

Анимированное свойство Свойство transition Неявный тип перехода
UIElement.Opacity Переход непрозрачности Скалярный переход
UIElement.Rotation RotationTransition Скалярный переход
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Перевод ПереводПереход Vector3Transition
Граница.Фон Переход фона BrushTransition (Переход щеткой)
ContentPresenter.Background Переход фона BrushTransition (Переход щеткой)
Панель.Фон Переход фона BrushTransition (Переход щеткой)

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

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}
  • Last updated on