Criando animação quadro a quadro com AnimationDrawable

( Android ) 


Neste tutorial vou demonstrar como é fácil criar uma animação Quadro a Quadro utilizando a classe AnimationDrawable. 


A maneira mais simples de criar uma animação quadro a quadro é definir a animação em um arquivo XML, colocado no res/drawable, e defini-la como background de um objeto View. No nosso caso será um objeto ImageView. 


Então chega de papo e vamos lá !!! 


Crie um novo projeto Android no Eclipse. 


Eu vou chama-lo de Exemplo Animation.  


print do projeto: 

Antes de proseguir, baixe as imagens que serão utilizadas no exemplo, e salve-as nas pastas res/drawable-hdpi , drawable-ldpi , drawable-mdpi. 
download: www.theheadsman.com.br/imagens_anima.zip


O próximo passo será criar o arquivo XML. 


Para criar o XML, selecione a pasta RES do projeto, clique com o botão direito, depois NEW  /  OTHER... / PASTA ANDROID.  Na tela de dilalogo selecione ANDROID XML FILE e aperte o botão NEXT.


print  tela de dialog:

na próxima tela: 

Resource Type: drawable
File: O nome do XML
Root Element: animation-list
Clique em finish e pronto. 


Observe que foi criada uma nova pasta chamada drawable sem as definições de DPIs. 

print XML

Um AnimationDrawable definido no XML consiste de uma único  elemento <animation-list>, e uma série de tags <item> aninhadas. 


Segue o XML: 

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/anima1" android:duration="100" />

    <item android:drawable="@drawable/anima2" android:duration="100" />

    <item android:drawable="@drawable/anima4" android:duration="100" />

    <item android:drawable="@drawable/anima6" android:duration="100" />

    <item android:drawable="@drawable/anima8" android:duration="100" />

    <item android:drawable="@drawable/anima9" android:duration="100" />

    <item android:drawable="@drawable/anima10" android:duration="100" />

    <item android:drawable="@drawable/anima11" android:duration="100" />

    <item android:drawable="@drawable/anima12" android:duration="100" />

    <item android:drawable="@drawable/anima13" android:duration="100" />

    <item android:drawable="@drawable/anima14" android:duration="100" />

    <item android:drawable="@drawable/anima15" android:duration="100" />

    <item android:drawable="@drawable/anima16" android:duration="100" />

</animation-list>

android:drawable="" - carrega as imagens que foram salvas anteriormente nas pastas drawable. 

android:duration=" - define o tempo de cada frame em milisegundos.

O nosso XML animation-list está configurado, agora vamos criar o componente ImageView onde serão carregadas as imagens da animação.  


res/layout/main.xml  

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <ImageView

        android:id="@+id/animacao"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" 

        android:layout_gravity="center_horizontal"/>

</LinearLayout>

E por fim, na nossa activity: 

public class ExemploAnimation extends Activity {

private ImageView animaHorse;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// Carrega o ImageView e define o background para o nosso XML

// AnimationDrawable

animaHorse = (ImageView) findViewById(R.id.animacao);

animaHorse.setBackgroundResource(R.drawable.animation);

AnimationDrawable frameAnimaHorse = (AnimationDrawable) animaHorse.getBackground();

// Inicia a animação

frameAnimaHorse.start();

}

}

Rode a aplicação. 


Obs: Teste em um aparelho real, a animação não está rodando com o virtual device.


O play da animação é um loop por padão 


Mas se quiser que a animação rode uma vez e pare, utilize o método setOneShot() da classe AnimationDrawable.  Por padrão o método setOnShot() recebe false como parâmetro. Passe true para que rode uma vez. 

frameAnimaHorse.setOneShot(true);

Faça um teste:
Crie um botão e chame o método stop() no objeto de instancia frameAnimaHorse.

frameAnimaHorse.stop();


O método IsRunning() indica se a animação está sendo executada ou não - retorna um valor boleano.



Pesquise mais sobre a API.
http://developer.android.com/reference/packages.html


Valeu, fui !!!