Criar imagens animadas

Além das imagens estáticas no mostrador do relógio, as imagens animadas podem trazer outra dimensão à experiência do usuário.

Esta seção trata especificamente do uso de arquivos de imagem animados. É possível animar componentes no mostrador do relógio usando o elemento Transform, que é abordado na página Como mudar dinamicamente a aparência dos elementos.

As animações podem consistir em um arquivo de imagem animada, como um GIF animado, ou uma sequência de Images, que se combinam para formar uma animação.

Além de especificar os arquivos a serem usados, você precisa definir como a animação vai se comportar. Por exemplo, se a reprodução será em loop ou, caso contrário, o que fazer no final, entre outras opções. Para isso, use um AnimationController.

Por fim, inclua uma imagem de miniatura em todas as animações.

Juntando tudo isso, uma animação básica pode ser implementada da seguinte maneira:

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

Consulte a referência PartAnimatedImage para mais detalhes sobre como incluir uma lista de imagens animadas e construir uma animação a partir de imagens estáticas.