Примечание
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Элемент управления 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, чтобы убедиться, что значки соответствуют принципам проектирования.
- Ограничение количества анимированных значков на одном экране или представлении. Только анимировать значки, чтобы привлечь внимание пользователя к месту, где им нужно принять меры или когда они выполняют действие.
Создание анимированного значка
- Важные API:класс AnimatedIcon
Приложение 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=""/>
</AnimatedIcon.FallbackIconSource>
</AnimatedIcon>
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.MenuItems>
NavigationViewItem автоматически задает следующие состояния в Анимированной иконке:
- Обычная
- PointerOver
- Нажато
- Выбрано
- Нажато и выбрано
- Наведение указателя на выбранное
Если GameSettingsIcon
имеет маркер, определенный для "NormalToPointerOver", значок будет анимирован, пока указатель не переместится на объект NavigationViewItem. Дополнительные сведения о создании маркеров см. в следующем разделе.
Определение маркеров анимированного значка
Чтобы создать настраиваемый GameSettingsIcon
в предыдущем примере, запустите JSON-файл Lottie (с маркерами) с помощью средства Windows LottieGen , чтобы создать код анимации в виде класса C#.
После запуска файла Lottie через LottieGen можно добавить в проект класс выходных данных CodeGen. Дополнительные сведения см. в руководстве LottieGen .
Установка состояния AnimatedIcon на новое значение также задает положение воспроизведения в анимации Lottie для перехода из одного состояния в другое. Эти позиции воспроизведения также идентифицируются маркерами в файле Lottie. Также можно определить определенные маркеры начала перехода или конца перехода.
Например, элемент управления AutoSuggestBox использует AnimatedIcon, который анимируется между следующими состояниями.
- Обычная
- PointerOver
- Нажато
Маркеры можно определить в файле 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 .
- API WinUI 2:Класс AnimatedIcon
- Откройте приложение коллекции WinUI 2 и посмотрите анимированную иконку в работе. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc
), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:AnimatedIcon />
Связанные статьи
Windows developer