Animar gráficos drawable

Testar o Compose
O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a usar animações no Compose.
Animar drawables vetoriais →
Figura 1. Um drawable animado.

Em algumas situações, as imagens precisam ser animadas. Isso é útil se você deseja exibir uma animação de carregamento personalizada composta por várias imagens ou se você quiser que um ícone se transforme de acordo com a à ação. O Android oferece duas opções para animar drawables.

A primeira opção é usar um AnimationDrawable. Isso você especifica diversos objetos arquivos drawable que exibem um de cada vez para criar uma animação. A segunda opção é usar uma AnimatedVectorDrawable, que permite animar as propriedades. de um drawable vetorial.

Usar AnimationDrawable

Uma forma de criar uma animação é carregar uma sequência de recursos drawable, como um rolo de filme. A classe AnimationDrawable é a base para esses tipos de animações desenháveis.

Para definir os frames de uma animação no código, use o método AnimationDrawable mas é mais fácil defini-los com um único arquivo XML que lista os frames que compõem a animação. O arquivo XML para esse tipo de animação pertence ao res/drawable/ do seu projeto Android. Nesse caso, as instruções indicam a ordem e a duração cada frame da animação.

O arquivo XML consiste em um elemento <animation-list> como o nó raiz e um série de nós <item> filhos que definem um frame, um recurso drawable e a duração dele. Confira um exemplo de arquivo XML para uma animação Drawable:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

Essa animação é executada por três frames. Como definir o android:oneshot da lista para true faz com que ela se repita uma vez e, em seguida, pare e mantenha no último frame. Se você definir android:oneshot como false, a animação vai se repetir.

Se você salvar esse XML como rocket_thrust.xml no arquivo res/drawable/ do projeto, é possível adicioná-lo como a imagem de plano de fundo a um View e depois chame start() para tocar. Aqui está um exemplo de uma atividade na qual a animação é adicionada a um ImageView e, depois, animados quando a tela é tocada:

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

É importante observar que o método start(), chamado no Não é possível chamar AnimationDrawable durante o método onCreate() da sua Activity, porque o AnimationDrawable ainda não está totalmente anexado ao janela. Para reproduzir a animação imediatamente, sem exigir interação, é possível chamá-la do onStart() no Activity, que é chamado quando o Android torna a visualização visível na tela.

Para mais informações sobre a sintaxe XML e tags e atributos disponíveis, consulte Recursos de animação.

Usar AnimatedVectorDrawable

Um drawable vetorial é um tipo de desenhável que é escalonável sem ficar pixelado ou desfocado. A AnimatedVectorDrawable turma e AnimatedVectorDrawableCompat para compatibilidade com versões anteriores. Permite animar o propriedades de um desenhável de vetor, como girá-lo ou alterar os dados de caminho para transformá-lo em imagem diferente.

Você normalmente define desenháveis de vetor animados em três arquivos XML:

  • Um drawable vetorial com o elemento <vector> res/drawable/.
  • Um drawable vetorial animado com o elemento <animated-vector> em res/drawable/.
  • Um ou mais animadores de objeto com o elemento <objectAnimator> em res/animator/.

Drawables vetoriais animados podem animar os atributos de <group> e Elementos <path>. O elemento <group> define um conjunto de caminhos ou subgrupos, e o elemento <path> define os caminhos a serem desenhados.

Ao definir um drawable vetorial que você quer animar, use o método android:name para atribuir um nome exclusivo a grupos e caminhos, para que você possa consultá-los a partir do animador e definições. Exemplo:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

A definição de drawables vetoriais animados se refere aos grupos e caminhos no drawable vetorial pelos nomes:

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

As definições de animação representam ObjectAnimator ou objetos AnimatorSet. A o primeiro animador neste exemplo gira o grupo de destino em 360 graus:

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

O segundo animador nesse exemplo transforma a forma do caminho do drawable vetorial em outra. Os caminhos precisam ser compatíveis com a transformação: eles precisam ter o mesmo número de comandos. e o mesmo número de parâmetros para cada comando.

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Confira o AnimatedVectorDrawable resultante:

Figura 2. Um AnimatedVectorDrawable.

Visualização do drawable vetorial animado (AVD)

A ferramenta Animation Vector Drawable no Android Studio permite visualizar animações recursos drawable. Essa ferramenta ajuda você a visualizar <animation-list>, <animated-vector> e <animated-selector> recursos em Android Studio e facilita o refinamento de animações personalizadas.

Usuário visualizando e reproduzindo uma animação no Android Studio
Figura 3. A ferramenta Animation Vector Drawable no Android Studio.

Para obter mais informações, consulte a referência da API para AnimatedVectorDrawable: