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

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

  • Статья

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

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

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

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

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

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

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

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

Движение 300 мс

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

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

Примеры

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

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

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

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

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

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

Анимированное свойство Свойство transition Неявный тип перехода
UIElement.Opacity НепрозрачностьTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background BackgroundTransition 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

Внимание

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

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

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