Criando animações no Android

Nos cursos de Android da Caelum, é comum encontrarmos alunos que queiram incorporar efeitos visuais à aplicação. Porém, essa necessidade é mais visível ao se programar jogos, onde é bastante comum o uso de animações, seja dos personagens ou do cenário. Existem várias técnicas para se criar animações, dentre as quais está aquela que é a mais antiga e intuitiva: a animação quadro a quadro.

AnimaçãoAo criar uma animação quadro a quadro, colocamos uma sequência de imagens estáticas que, ao serem exibidas numa certa velocidade produz o efeito de movimento. Como o Android já possui suporte para vários tipos de animações, vamos ver como criar uma animação quadro a quadro, que chamamos no Android de Animation Drawable.

Primeiramente, vamos colocar o png das nossas imagens na pasta res/drawable. É nessa pasta que o Android vai procurar as imagens usadas numa aplicação. Com os png na pasta, vamos dizer para o Android em qual ordem e por quanto tempo as imagens deverão ser exibidas na nossa animação. Para isso, na pasta res/drawable vamos criar um xml chamado animacao.xml e utilizar uma tag chamada animation-list:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">
    <item android:drawable="@drawable/imagem1" android:duration="100"/>
    <item android:drawable="@drawable/imagem2" android:duration="100"/>
    <item android:drawable="@drawable/imagem3" android:duration="100"/>
    <item android:drawable="@drawable/imagem4" android:duration="100"/>
</animation-list>

Perceba que cada item dessa lista contém a imagem, que está na pasta res/drawable, e a duração do tempo que essa imagem será exibida. Além disso, o atributo android:oneshot diz se essa animação deve ficar em loop infinito ou parar assim que o último quadro for exibido. No nosso caso, deixaremos em loop infinito ao setar esse atributo como false.

Nossa animação está pronta, agora precisamos atribuí-la a um componente de view da nossa aplicação.

Vamos criar um ImageView que conterá nossa animação e chamá-lo de animacao com o uso do atributo android:id:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <ImageView 
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:id="@+id/animacao"
    />
</LinearLayout>

Com esse ImageView criado, basta setar nosso xml de animação nele:

ImageView imageView = findViewById(R.id.animacao);
imageView.setBackgroundResource(R.drawable.animacao);
		
AnimationDrawable animation = (AnimationDrawable) imageView.getBackground();
animation.start();

Com isso, podemos ver nosso ImageView com uma animação.

Além de animações quadro a quadro, podemos alterar a posição de um elemento de View dando a ilusão de movimento. Para isso, podemos usar a classe TranslateAnimation.

Vamos deslocar nossa ImageView para dar a ilusão de movimento:

Animation deslocamento = new TranslateAnimation(0, 1000, 0, 0);
deslocamento.setDuration(3000);
imageView.startAnimation(deslocamento);

Note que o TranslateAnimation recebe quatro inteiros: eles significam, respectivamente, as diferenças entre as posições iniciais e finais no eixo x e y. No nosso caso, estamos fazendo um movimento horizontal (por isso os dois ultimos valores são zeros) da esquerda para a direita começando onde o ImageView estiver posicionado (por isso, o primeiro valor é zero), e indo até a posição 1000 da minha tela.

Após definir as posições do nosso movimento, podemos definir a sua duração com o método setDuration().

Além do Animation Drawable, o Android oferece vários outros tipos de animações que são bastante úteis para jogos ou até mesmo para aplicativos comuns.

E se quiser saber mais sobre o desenvolvimento Android e Mobile em geral não deixe de visitar a MobileConf RJ 2014!

11 Comentários

  1. Lucas Martins 30/04/2014 at 16:23 #

    Exclente guia para nós, amantes de games!

  2. Mateus 06/05/2014 at 15:35 #

    Muito bom, direto ao ponto e sem rodeios. Parabéns.

  3. Brito 03/08/2014 at 18:33 #

    Gostaria muito de uma apostila mobile para android

  4. Wilamis Micael 27/09/2014 at 17:39 #

    Como eu crio um boneco com animação? O que vc me recomendaria???

  5. Alex oliveira 06/11/2015 at 12:54 #

    Muito bom

  6. Mauro Lúcio da Rocha 30/06/2016 at 20:18 #

    Muito bom. Simples e direto!

  7. Marcelo 18/07/2016 at 17:27 #

    Olá, muito boa a dica!! Existe algum evento que indique quando a animação terminou? Obrigado!

  8. Joana 12/04/2017 at 02:28 #

    Olá, muito bom o tutorial, me ajudou muito. Quando inseri a animação em meu app, as frases que apareciam em meu aplicativo sumiu depois que foi colocado o código. Como posso ter a animação de fundo e as frases aparecendo na tela?

  9. Astarote 29/05/2017 at 10:25 #

    Bom dia!
    Muito bom está dica, mas quando eu coloco o código na minha classe java ele me manda uma mensagem dizendo quena linha abaixo exites um erro

    ImageView imageView = findViewById(R.id.animacao);
    e me mostras estas mensagens ja importei o android.widget.ImageView
    Tipos imcompativeis
    Required: android.widget.ImageView
    Found: android.view.View

  10. Anderson 25/06/2017 at 09:42 #

    idem…
    Bom dia!
    Muito bom está dica, mas quando eu coloco o código na minha classe java ele me manda uma mensagem dizendo quena linha abaixo exites um erro

    ImageView imageView = findViewById(R.id.animacao);
    e me mostras estas mensagens ja importei o android.widget.ImageView
    Tipos imcompativeis
    Required: android.widget.ImageView
    Found: android.view.View

Deixe uma resposta