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

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

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

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

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

Это правильный контроль?

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

Не используйте 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, который затем можно инстанцировать и использовать с Анимированным значком.

Замечание

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

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

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

Recommendations

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

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

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

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

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из 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 в project. Дополнительные сведения см. в руководстве 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");
}

Кері байланыс

Бет пайдалы болды ма?

Last updated on 2026-02-25