Compartir a través de

AnimatedIcon

  • Artículo

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

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 animación 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 la animación no se activa mediante una transición de estado visual y se reproduce en un bucle, se reproduce solo una vez o se puede pausar. En su lugar, use AnimatedVisualPlayer.

No use AnimatedIcon para nada que no sea un icono o donde el control no admita una propiedad IconElement o IconElementSource. En su lugar, use 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 donde 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.

Uso de 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 posiciones de tiempo de reproducción. A continuación, puede establecer el estado AnimatedIcon en estos marcadores. Por ejemplo, si tiene una posición de reproducción en el archivo Lottie marcada como "PointerOver", puede 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

  • Vea la guía de experiencia de usuario de Iconos de aplicaciones de Windows para asegurarse de que los iconos coincidan con los principios de diseño.
  • Limite el número de iconos animados a una sola pantalla o vista. Solo anime iconos para atraer la atención del usuario a dónde deben adoptar 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 WinUI 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo WinUI 2. Existen API para este control 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 para ver AnimatedIcon en acción

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

Agregar un 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 su 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 AnimatedIcon a NavigationViewItem

El control NavigationViewItem establece automáticamente los 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>

Animación del icono de configuración

NavigationViewItem establece automáticamente los siguientes estados en AnimatedIcon:

  • Normal
  • PointerOver
  • Presionado
  • Seleccionada
  • PressedSelected
  • PointerOverSelected

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

Definición de marcadores AnimatedIcon

Para crear GameSettingsIcon personalizado 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 que ejecute 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 de 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 estados siguientes:

  • 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 los 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, se animará a la posición de reproducción de _End.

El algoritmo exacto utilizado para asignar los cambios de estado de AnimatedIcon a las posiciones de reproducción del 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", entonces se realiza un corte directo a 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", entonces se realiza un corte directo a la posición de reproducción ""[PreviousState]To[NewState]_Start".
  • Compruebe si los marcadores de IAnimatedVisualSource2 se han proporcionado para el marcador "[PreviousState]To[NewState]". Si se encuentra, se realiza un corte directo a la posición de reproducción "[PreviousState]To[NewState]".
  • Compruebe si los marcadores de IAnimatedVisualSource2 se han proporcionado para el marcador "[NewState]". Si se encuentra, se realiza un corte directo 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, se realiza un corte directo al primer marcador que se encuentre con la posición de reproducción del final adecuado.
  • Compruebe si "[NewState]" se analiza como un flotante. Si es así, realiza una animación desde la posición actual hasta el flotante analizado.
  • Corte directo 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}]

Agregar un AnimatedIcon independiente

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

La clase MyAcceptAnimation 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 marco final de la transición de estado en 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");
}