AnimatedIcon

  • Artículo

Un control AnimatedIcon reproduce imágenes animadas en respuesta a los cambios de estado visual e interacción del usuario.

Los iconos animados pueden llamar la atención a un componente de interfaz de usuario, como el botón siguiente de un tutorial, o simplemente reflejar la acción asociada al icono de una manera divertida e interesante.

Las animaciones personalizadas se pueden crear con Adobe AfterEffects y representarse con la biblioteca Lottie-Windows para usarlas como icono animado en la aplicación WinUI. Para obtener más información, consulte Uso de Lottie para crear contenido animado para un AnimatedIcon más adelante en este artículo.

En el ejemplo siguiente se muestra un icono de búsqueda animado básico creado en Adobe AfterEffects y representado a través de Lottie.

Icono de búsqueda animada

¿Es este el control adecuado?

Use el control AnimatedIcon cuando el icono de un control necesite animarse en respuesta a la interacción del usuario con el control, como cuando un usuario mantiene el puntero sobre un botón o hace clic en él.

No use un AnimatedIcon si una transición de estado visual no desencadena la animación y se reproduce en un bucle, reproduce una sola vez o se puede pausar. En su lugar, usa AnimatedVisualPlayer.

No utilice AnimatedIcon para nada que no sea un icono o donde el control no admita una propiedad IconElement o IconElementSource. En su lugar, usa AnimatedVisualPlayer.

Cuando no se requiere un icono animado, use FontIcon, SymbolIcon o BitmapIcon en su lugar.

Diferencias entre AnimatedIcon y AnimatedVisualPlayer

AnimatedIcon es un IconElement, que se puede usar en cualquier lugar en el que se requiera un elemento o IconElement (como NavigationViewItem.Icon) y se controla a través de una propiedad State.

AnimatedVisualPlayer es un reproductor de animación más general, que se controla a través de métodos como Play y Pause, y se puede usar en cualquier parte de una aplicación.

Usar Lottie para crear contenido animado para un AnimatedIcon

Definir una animación para un AnimatedIcon comienza igual que el proceso para definir una animación para un AnimatedVisualPlayer. Debe crear, u obtener, el archivo Lottie para el icono que desea agregar y ejecutar ese archivo a través de LottieGen. LottieGen genera código para una clase de C++/WinRT para la cual luego puede crear instancias y usar con AnimatedIcon.

Nota:

El control AutoSuggestBox usa la clase AnimatedVisuals.AnimatedFindVisualSource , que se generó mediante la herramienta LottieGen.

También puede definir marcadores en la definición de animación para indicar las posiciones de tiempo de reproducción. A continuación, puede establecer el estado AnimatedIcon en estos marcadores. Por ejemplo, si tienes una posición de reproducción en el archivo Lottie marcado como "PointerOver", puedes establecer el estado AnimatedIcon en "PointerOver" y mover la animación a esa posición de reproducción.

Definir una propiedad de color en la animación de Lottie denominada "Primer plano" le permite establecer el color mediante la propiedad AnimatedIcon.Foreground.

Recomendaciones

  • Consulte la guía de experiencia del usuario para iconos para aplicaciones de Windows para asegurarse de que los iconos coincidan con los principios de diseño.
  • Limite el número de iconos animados en una sola pantalla o vista. Anima solo los iconos para atraer la atención del usuario a dónde deben tomar medidas o cuando realicen una acción.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

AnimatedIcon para aplicaciones para UWP requiere la Biblioteca de interfaz de usuario de Windows 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows). Las API de este control existen en el espacio de nombres Microsoft.UI.Xaml.Controls .

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

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

<muxc:AnimatedIcon />

Crear un icono animado

Abra la aplicación Galería de WinUI 3 y vea AnimatedIcon en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

Agregar un Objeto AnimatedIcon a un botón

En el ejemplo siguiente se muestra un botón Atrás que muestra un icono de retroceso animado en un evento PointerEntered .

  • AnimatedBackVisualSource es una clase creada con la herramienta de línea de comandos LottieGen.
  • FallbackIconSource se usa cuando no se pueden reproducir animaciones, como en versiones anteriores de Windows que no admiten animaciones de Lottie.
  • Si el usuario desactiva las animaciones en la configuración del sistema, AnimatedIcon muestra el marco final de la transición de estado en que se encontraban los controles.
<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");
}

Agregar un Objeto AnimatedIcon a NavigationViewItem

El control NavigationViewItem establece automáticamente estados comunes en un AnimatedIcon basado en el estado del control, si esos marcadores se definen en la animación lottie.

Por ejemplo, en el ejemplo siguiente se muestra cómo establecer una animación personalizada (GameSettingsIcon) generada por la herramienta 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>

Engranaje de configuración animada

NavigationViewItem establece automáticamente los siguientes estados en AnimatedIcon:

  • Normal
  • PointerOver
  • Presionado
  • Seleccionado
  • PressedSelected
  • PointerOverSelected

Si GameSettingsIcon tiene un marcador definido para "NormalToPointerOver", el icono se animará hasta que el puntero se mueva sobre navigationViewItem. Consulte la sección siguiente para obtener más información sobre cómo crear marcadores.

Definición de marcadores AnimatedIcon

Para crear el personalizado GameSettingsIcon en el ejemplo anterior, ejecute un archivo JSON de Lottie (con marcadores) a través de la herramienta Windows LottieGen para generar el código de animación como una clase de C#.

Una vez ejecutado el archivo Lottie a través de LottieGen, puede agregar la clase de salida CodeGen al proyecto. Consulte el tutorial de LottieGen para obtener más información.

Al establecer el estado AnimatedIcon en un nuevo valor, también se establece una posición de reproducción en la animación Lottie para la transición del estado anterior al nuevo estado. Estas posiciones de reproducción también se identifican con marcadores en el archivo Lottie. También se pueden definir marcadores específicos para el inicio de la transición o el final de la transición.

Por ejemplo, el control AutoSuggestBox usa un AnimatedIcon que anima con los siguientes estados:

  • Normal
  • PointerOver
  • Presionado

Puede definir marcadores en el archivo Lottie con esos nombres de estado. También puede definir marcadores de la siguiente manera:

  • Inserte "To" entre los nombres de estado. Por ejemplo, si define un marcador "NormalToPointerOver", cambiar el estado AnimatedIcon de "Normal" a "PointerOver" hará que se mueva a la posición de reproducción de este marcador.
  • Anexe "_Start" o "_End" a un nombre de marcador. Por ejemplo, definir marcadores "NormalToPointerOver_Start" y "NormalToPointerOver_End" y cambiar el estado AnimatedIcon de "Normal" a "PointerOver" hará que salte a la posición de reproducción del marcador de _Start y, a continuación, anime a la posición de reproducción del _End.

El algoritmo exacto usado para asignar los cambios de estado de AnimatedIcon a las posiciones de reproducción de marcador:

  • Compruebe los marcadores del archivo proporcionado para los marcadores "[PreviousState]To[NewState]_Start" y "[PreviousState]To[NewState]_End". Si se encuentran ambos reproducen la animación de "[PreviousState]To[NewState]_Start" a "[PreviousState]To[NewState]_End".
  • Si no se encuentra "[PreviousState]To[NewState]_Start", pero se encuentra "[PreviousState]To[NewState]_End", se encuentra la posición de reproducción "[PreviousState]To[NewState]_End".
  • Si no se encuentra "[PreviousState]To[NewState]_End" pero se encuentra "[PreviousState]To[NewState]_Start", se encuentra la posición de reproducción "[PreviousState]To[NewState]_Start".
  • Compruebe si los marcadores de IAnimatedVisualSource2 proporcionados para el marcador "[PreviousState]To[NewState]". Si se encuentra, se corta de forma dura a la posición de reproducción "[PreviousState]To[NewState]".
  • Compruebe si los marcadores de IAnimatedVisualSource2 proporcionados para el marcador "[NewState]". Si se encuentra, corte duro a la posición de reproducción "[NewState]".
  • Compruebe si los marcadores de IAnimatedVisualSource2 proporcionados tienen cualquier marcador que termine con "To[NewState]_End". Si se encuentra algún marcador que tenga ese final, corte duro al primer marcador encontrado con la posición de reproducción del final adecuado.
  • Compruebe si "[NewState]" analiza en un float. Si lo hace, animado desde la posición actual hasta el float analizado.
  • Corte duro a la posición de reproducción 0,0.

En el ejemplo siguiente se muestra el formato de marcador en un archivo JSON de Lottie. Consulte la guía de AnimatedIcon para obtener más detalles.

"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}]

Adición de un animatedIcon independiente

En el ejemplo siguiente se muestra un botón en el que el usuario hace clic para aceptar un mensaje.

La MyAcceptAnimation clase se crea con la herramienta LottieGen .

FallbackIconSource se usará en lugar de la animación cuando no se puedan reproducir animaciones, como en versiones anteriores de Windows que no admiten animaciones de Lottie.

Si el usuario final desactiva las animaciones en su configuración del sistema, AnimatedIcon mostrará el fotograma final de la transición de estado en la que se encontraban los controles.

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