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

Объединение его

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

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

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

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

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

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

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

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

300 мс движение

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

Контракт на управление:
Рост: 150 мс; Упрощение: ускорение по умолчанию

Примеры

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

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

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

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

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

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

Анимированное свойство Свойство transition Неявный тип перехода
UIElement.Opacity Переход непрозрачности Скалярный переход
UIElement.Rotation ПоворотПереход Скалярный переход
UIElement.Scale ScaleTransition Вектор3Переход
UIElement.Перевод ПереводПереход Вектор3Переход
Граница.Фон ФонПереход BrushTransition (Переход щеткой)
ContentPresenter.Фон ФонПереход 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;
}

UWP и WinUI 2

Внимание

Сведения и примеры, приведенные в этой статье, оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но, как правило, применимы и к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

Для неявных анимаций требуется Windows 10 версии 1809 (ПАКЕТ SDK 17763) или более поздней версии.