AnimatedIcon

Статья
07/29/2024

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

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

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

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

Выбор правильного элемента управления

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

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

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

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

Различия между анимированным и анимированнымVisualPlayer

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

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

Использование Lottie для создания анимированного содержимого для анимированногоIcon

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

Примечание.

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

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

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

UWP и WinUI 2

Внимание

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

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

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

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

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

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

<muxc:AnimatedIcon />

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

Важные API: класс AnimatedIcon

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

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

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

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

Это AnimatedBackVisualSource класс, созданный с помощью средства командной строки LottieGen .
FallbackIconSource используется, когда анимации не могут воспроизводиться, например в старых версиях Windows, которые не поддерживают анимации Lottie.
Если пользователь отключает анимацию в параметрах системы, анимированныйIcon отображает окончательный кадр перехода состояния, в котором находились элементы управления.

<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 автоматически задает следующие состояния в АнимированномIcon:

Обычная
PointerOver
При нажатии
Выбрано
PressedSelected
PointerOverSelected

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

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

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

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

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

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

Обычная
PointerOver
При нажатии

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

Вставьте "To" между именами состояний. Например, если вы определяете маркер NormalToPointerOver, изменение состояния АнимированногоIcon с "Normal" на PointerOver приведет к перемещению в положение воспроизведения этого маркера.
Добавьте "_Start" или "_End" в имя маркера. Например, определение маркеров "NormalToPointerOver_Start" и "NormalToPointerOver_End" и изменение состояния АнимированногоIcon с "Normal" на "PointerOver" приведет к переходу к позиции воспроизведения _Start маркера, а затем анимацию в положение воспроизведения _End.

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

Проверьте маркеры предоставленного файла для маркеров "[PreviousState]To[NewState]_Start" и "[PreviousState]To[NewState]_End". Если оба значения отображаются в анимации от "[PreviousState]To[NewState]_Start" до "[PreviousState]To[NewState]_End".
Если не найдено значение "[PreviousState]To[NewState]_Start", но найдено значение "[PreviousState]To[NewState]_End", то трудно сократить положение воспроизведения "[НазадState]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}]

Добавление автономного анимированногоicon

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

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

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

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

<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");
}

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

AnimatedIcon

Выбор правильного элемента управления

Различия между анимированным и анимированнымVisualPlayer

Использование Lottie для создания анимированного содержимого для анимированногоIcon

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

UWP и WinUI 2

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

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

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

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

Добавление автономного анимированногоicon

Дополнительные ресурсы

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

AnimatedIcon

Выбор правильного элемента управления

Различия между анимированным и анимированнымVisualPlayer

Использование Lottie для создания анимированного содержимого для анимированногоIcon

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

UWP и WinUI 2

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

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

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

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

Добавление автономного анимированногоicon

Связанные статьи

Дополнительные ресурсы