AnimatedIcon

Статья
07/13/2023

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание

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

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

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

UWP и WinUI 2

Важно!

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

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

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

Класс Apis WinUI 2:AnimatedIcon
Откройте приложение "Коллекция WinUI 2" и просмотрите Приложение AnimatedIcon в действии. Приложения из коллекции 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" и просмотрите Приложение AnimatedIcon в действии.

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

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

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

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

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

Добавление Объекта AnimatedIcon в NavigationViewItem

Элемент управления NavigationViewItem автоматически задает общие состояния в AnimationIcon на основе состояния элемента управления, если эти маркеры определены в анимации 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 автоматически задает следующие состояния в AnimatedIcon:

Норм.
PointerOver
Нажато
Выбрано
PressedSelected
PointerOverSelected

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

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

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

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

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

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

Норм.
PointerOver
Нажато

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

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

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

Проверьте маркеры предоставленного файла на наличие маркеров "[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]" в плавающую строку. Если это так, анимируется из текущей позиции в проанализированное значение float.
Жесткое вырезание до позиции воспроизведения 0,0.

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

"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.

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

<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

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

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

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

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

UWP и WinUI 2

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

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

Добавление Объекта AnimatedIcon в NavigationViewItem

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

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

Обратная связь

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

AnimatedIcon

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

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

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

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

UWP и WinUI 2

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

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

Добавление Объекта AnimatedIcon в NavigationViewItem

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

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

Похожие статьи

Обратная связь

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