AnimatedIcon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание

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

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

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

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

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

UWP и WinUI 2

Важно!

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

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

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

• Класс WinUI 2 Apis:AnimatedIcon
• Откройте приложение коллекции 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:анимированный классIcon

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

Приложение коллекции 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");
}

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

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

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

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

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

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

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

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

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

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

• Вставьте "To" между именами состояний. Например, если вы определяете маркер NormalToPointerOver, изменение состояния АнимированногоIcon с "Normal" на PointerOver приведет к перемещению в положение воспроизведения этого маркера.
• Добавьте "_Start" или "_End" в имя маркера. Например, определение маркеров "NormalToPointerOver_Start" и "NormalToPointerOver_End" и изменение состояния АнимированногоIcon с "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]" с плавающей запятой. Если это так, анимированные из текущей позиции в проанализированное плавающее значение.
• Трудно сократить положение воспроизведения 0,0.

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

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

Если конечный пользователь отключает анимации в параметрах системы, 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");
}

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

• Значки
• Анимации в XAML