Criando animação Quadro a Quadro

2

Neste tutorial você irá aprender como criar uma animação quadro a quadro.

Referência

Para fazer uma homenagem aos 45 anos da primeira apresentação do Chaves, vamos criar uma animação quadro a quadro de uma cena muito conhecida, a famosa TOMAAAA do Sr. Madruga no Chaves.

toma
IMPORTANTE
Este exemplo foi criado com a versão mais recente do Android Studio 2.2 Preview 3 e é importante ficar atento que já estou utilizando o novo formato de layout do Android, o ConstraintLayout.

Caso você ainda não tenha atualizado seu Android Studio e continua com a versão estável, não se preocupe, basta adicionar a referência da dependência em seu gradle (build.gradle) nível de módulo.

1. Mão na massa

Primeiro precisamos criar um novo projeto (File -> New -> New Project) e na janela Add an Activity to Mobile, selecione a opção Empty Activity.

Projeto Empty Activity
Agora vamos adicionar todas as imagens dentro da pasta drawable e vamos criar a animação.

Imagens Animação
Feito isso vamos criar agora a animação. Dentro da pasta drawable, crie o arquivo chaves_animado.xml clicando com o botão direito sobre a pasta drawable, FILE -> NEW -> Drawable resource file e cole o código abaixo.

Note que as imagens foram incluídas de forma sequencial, ou seja, a animação será rodada nesta sequência respeitando o tempo de 50ms (milisegundos) e deverá se repetir android:oneshot=”false”. Caso opte por rodar apenas uma vez a animação, deixe a tag oneshot da seguinte forma android:oneshot=”true”.

Nossa animação esta pronta, agora precisamos criar um componente de Imagem para rodar essa animação sobre ele.

Vamos até o layout principal (activity_main.xml) e vamos adicionar um ImageView.

Feito isso agora precisamos fazer a referência deste ImageView e criar a animação via código.

2. Código completo

Código Fonte

Clique aqui para baixar o projeto completo.

Qualquer dúvida deixe seu comentário

Share.

About Author

gorio

Engenheiro de Computação, com 6 anos de experiência e vivência no mundo de Sistemas Embarcados e Mobile.

2 Comentários

Leave A Reply

*