Crea imágenes animadas

Además de las imágenes estáticas en la cara de reloj, las imágenes animadas pueden agregar una dimensión más a la experiencia del usuario.

Ten en cuenta que esta sección trata específicamente sobre el uso de archivos de imágenes animadas. Es posible animar componentes en la cara de reloj con el elemento Transform, que se explica en la página Cómo cambiar de forma dinámica la apariencia de los elementos.

Las animaciones pueden constar de un archivo de imagen animada, como un GIF animado, o una secuencia de Images, que se combinan para formar una animación.

Además de especificar los archivos que se usarán, deberás definir cómo se debe comportar la animación, por ejemplo, si se debe repetir la reproducción o, de lo contrario, qué hacer al final, entre otras opciones. Para ello, usa un AnimationController.

Por último, para todas las animaciones, incluye una imagen de miniatura.

Si combinamos todo esto, se puede implementar una animación básica de la siguiente manera:

<PartAnimatedImage x="0" y="0" width="450" height="450">
  <AnimationController play="ON_VISIBLE"/>
  <AnimatedImage resource="my_animation" format="AGIF"/>
  <Thumbnail resource="my_animation_thumbnail" />
</PartAnimatedImage>

Consulta la referencia de PartAnimatedImage para obtener más detalles sobre cómo incluir una lista de imágenes animadas y cómo crear una animación a partir de imágenes estáticas.