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

АнимированнаяИконка

Элемент управления AnimatedIcon воспроизводит анимированные изображения в ответ на изменения пользовательского взаимодействия и визуального состояния.

Анимированные значки могут привлечь внимание к компоненту пользовательского интерфейса, например следующей кнопке в руководстве, или просто отразить действие, связанное с значком, в интересном и интересном виде.

Пользовательские анимации можно создавать с помощью Adobe AfterEffects и рендериться с помощью библиотеки Lottie-Windows, чтобы использовать их в качестве анимированного значка в вашем приложении WinUI. Дополнительные сведения см. в разделе Использование Lottie для создания анимированного контента для анимированной иконки в одной из следующих частей этой статьи.

В следующем примере показан базовый анимированный значок поиска, созданный в Adobe AfterEffects и отрисованный с помощью Lottie.

Значок анимированного поиска

Это правильный элемент управления?

Используйте элемент управления AnimatedIcon, когда значок элемента управления должен анимироваться в ответ на взаимодействие пользователя с элементом управления, например при наведении указателя мыши на кнопку или нажатие кнопки.

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

Не используйте анимированный значок ни для чего другого, кроме как для значка, или в случаях, когда элемент управления не поддерживает ни свойство IconElement, ни IconElementSource. Вместо этого используйте AnimatedVisualPlayer.

Если анимированный значок не требуется, используйте FontIcon, SymbolIcon или BitmapIcon.

Различия между AnimatedIcon и AnimatedVisualPlayer

AnimatedIcon — это IconElement, который можно использовать в любом месте, где требуется элемент или IconElement (например, NavigationViewItem.Icon), и управляется через свойство State.

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

Используйте Lottie для создания анимированного содержимого для анимированной иконки

Определение анимации для AnimatedIcon начинается так же, как и процесс создания анимации для AnimatedVisualPlayer. Необходимо создать или получить файл Lottie для значка, который нужно добавить и запустить через LottieGen. LottieGen создает код для класса C++/WinRT, который затем можно создать и использовать с AnimatedIcon.

Примечание.

Элемент управления AutoSuggestBox использует класс AnimatedVisuals.AnimatedFindVisualSource , который был создан с помощью средства LottieGen.

Вы также можете определить маркеры в определении анимации, чтобы указать позиции времени воспроизведения. Затем можно задать для этих маркеров состояние Анимированного значка. Например, если у вас есть позиция воспроизведения в файле Lottie с отметкой "PointerOver", можно задать для состояния AnimationIcon значение "PointerOver" и переместить анимацию в эту позицию воспроизведения.

Определение свойства цвета в анимации Lottie с именем Foreground позволяет задать цвет с помощью свойства AnimationIcon.Foreground.

Рекомендации

  • Просмотрите рекомендации по пользовательскому интерфейсу для значков для приложений Windows, чтобы убедиться, что значки соответствуют принципам проектирования.
  • Ограничение количества анимированных значков на одном экране или представлении. Только анимировать значки, чтобы привлечь внимание пользователя к месту, где им нужно принять меры или когда они выполняют действие.

Создание анимированного значка

Откройте приложение WinUI 3 Gallery, чтобы увидеть анимированную иконку в действии

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

Добавление анимационного элемента в кнопку

В следующем примере показана кнопка "Назад", отображающая анимированный значок назад в событии PointerEntered .

  • Класс AnimatedBackVisualSource, созданный с помощью инструмента командной строки LottieGen.
  • FallbackIconSource используется, когда анимации не могут воспроизводиться, например в старых версиях Windows, которые не поддерживают анимации Lottie.
  • Если пользователь отключил анимацию в параметрах системы, AnimatedIcon отображает окончательный кадр того состояния, на котором остановилась анимация элементов управления.
<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

Добавление анимации в NavigationViewItem

Элемент управления NavigationViewItem автоматически задает общие состояния анимированной иконке на основе состояния элемента управления, если эти маркеры определены в анимации Lottie.

Например, в следующем примере показано, как задать настраиваемую анимацию (GameSettingsIcon), созданную средством LottieGen:

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Анимированные параметры шестеренки

NavigationViewItem автоматически задает следующие состояния в Анимированной иконке:

  • Обычная
  • ПойнтерОвер
  • Нажато
  • Выбрано
  • Нажато и выбрано
  • Наведение указателя на выбранное

Если GameSettingsIcon имеет маркер, определенный для "NormalToPointerOver", значок будет анимирован, пока указатель не переместится на объект NavigationViewItem. Дополнительные сведения о создании маркеров см. в следующем разделе.

Определение маркеров анимированного значка

Чтобы создать настраиваемый GameSettingsIcon в предыдущем примере, запустите JSON-файл Lottie (с маркерами) с помощью средства Windows LottieGen , чтобы создать код анимации в виде класса C#.

После запуска файла Lottie через LottieGen можно добавить в проект класс выходных данных CodeGen. Дополнительные сведения см. в руководстве LottieGen .

Установка состояния AnimatedIcon на новое значение также задает положение воспроизведения в анимации Lottie для перехода из одного состояния в другое. Эти позиции воспроизведения также идентифицируются маркерами в файле Lottie. Также можно определить определенные маркеры начала перехода или конца перехода.

Например, элемент управления AutoSuggestBox использует AnimatedIcon, который анимируется между следующими состояниями.

  • Обычная
  • ПойнтерОвер
  • Нажато

Маркеры можно определить в файле Lottie с этими именами состояний. Вы также можете определить маркеры следующим образом:

  • Вставьте «To» между названиями штатов. Например, если вы определяете маркер "NormalToPointerOver", изменение состояния анимированного значка с "Normal" на "PointerOver" приведет к перемещению в позицию воспроизведения этого маркера.
  • Добавьте "_Start" или "_End" в имя маркера. Например, определение маркеров "NormalToPointerOver_Start" и "NormalToPointerOver_End" и изменение состояния AnimatedIcon с "Normal" на "PointerOver" приведёт к тому, что воспроизведение начнётся с позиции _Start маркера, а затем анимация воспроизведется до позиции _End.

Точный алгоритм, используемый для сопоставления изменений состояния анимированного значка с позициями воспроизведения маркеров:

  • Проверьте в предоставленном файле маркеры "[PreviousState]To[NewState]_Start" и "[PreviousState]To[NewState]_End". Если обнаружены оба, воспроизведите анимацию от "[PreviousState]To[NewState]_Start" до "[PreviousState]To[NewState]_End".
  • Если "[PreviousState]To[NewState]_Start" не найдено, но "[PreviousState]To[NewState]_End" найдено, то немедленно перейти к позиции воспроизведения "[PreviousState]To[NewState]_End".
  • Если "[PreviousState]To[NewState]_End" не найдено, но найдено "[PreviousState]To[NewState]_Start", то следует резко переключиться на позицию воспроизведения "[PreviousState]To[NewState]_Start".
  • Проверьте, имеются ли маркеры в IAnimatedVisualSource2 для "[PreviousState]To[NewState]". Если оно найдено, то следует резко перейти на положение воспроизведения "[PreviousState]To[NewState]".
  • Проверьте, заданы ли маркеры IAnimatedVisualSource2 для маркера "[NewState]". Если объект найден, то сразу перейти к позиции воспроизведения "[NewState]".
  • Проверьте, есть ли среди маркеров IAnimatedVisualSource2 такие, которые заканчиваются на "To[NewState]_End". Если обнаружен какой-либо маркер с таким окончанием, сделайте резкий переход к первому маркеру с соответствующей позицией воспроизведения окончания.
  • ** Проверьте, можно ли [NewState] разобрать как число с плавающей запятой. Если это так, анимация из текущей позиции в разобранное число с плавающей запятой.
  • Резкий переход к позиции воспроизведения 0.0.

В следующем примере показан формат маркера в JSON-файле Lottie. Дополнительные сведения см. в руководстве по Анимированному значку.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

Добавление отдельного анимированного значка

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

Класс MyAcceptAnimation создается с помощью средства LottieGen .

FallbackIconSource будет использоваться вместо анимации, если анимации не могут воспроизводиться, например в старых версиях Windows, которые не поддерживают анимации Lottie.

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

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}

UWP и WinUI 2

Внимание

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

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

Для работы AnimatedIcon в приложениях UWP требуется WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI 2. API для этого элемента управления существуют в пространстве имен Microsoft.UI.Xaml.Controls .

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />