Animando aplicativos com Animation - Parte 1
Autor: Gustavo Carvalho | Publicado: 2012-07-17T11:42:00-03:00




Facebook, Google+, Twitter, Evernote, e muitos outros aplicativos profissionais possuem isso em comum: utilizam animações para deixar o aplicativo mais agradável de se visualizar e navegar. Ao contrário do que pode parecer, utilizar animações não é apenas uma questão de estética - apesar de que estética no mundo concorrido dos aplicativos ser muito importante - é uma questão de navegabilidade, user experience.



Animações dão indicações visuais do que está acontecendo. Ao invés de uma view&nbsp;simplesmente desaparecer e o usuário ficar sem saber o que aconteceu com ela, ela pode ser deslizada pro lado, ou desaparecer suavemente em direção a algum botão. Dessa forma o usuário sabe o que aconteceu com a view&nbsp;e, se for bem usado, saberá o que fazer para tê-la de volta.





Animation é a classe abstrata que representa uma animação a ser executada por uma view. O que é utilizada de fato são suas subclasses:&nbsp;




AlphaAnimation: Animação de transparência, torna o objeto opaco,&nbsp;transparente&nbsp; ou semi-transparente;
RotateAnimation: Animação de rotação, rotaciona o objeto em volta de um ponto pivot;
ScaleAnimation: Animação de escala, aumenta e diminui o tamanho do objeto;
TranslateAnimation: Animação de translação, movimenta o objeto na tela;
AnimationSet:&nbsp;Conjunto&nbsp;de animações a serem executadas&nbsp;simultaneamente.


Há algumas propriedades do Animation que é importante entender:




duration: É o tempo que a animação irá levar para ser totalmente executada;
fillAfter: Propriedade que informa se o resultado da animação deve continuar depois do termino da animação ou não;
repeatCount: Quantas vezes a animação será executada em sequência. Pode ser 0 (executar apenas uma vez), qualquer número ou INFINITE (executar para sempre);
repeatMode: A forma como o repeat se dará, RESTART (volta para o inicio da animação) ou REVERSE (faz a animação reversa);
startOffset: Delay em&nbsp;milissegundos&nbsp;a ser aguardado antes da animação ser executada.


Sabendo desses&nbsp;princípios&nbsp;e usando o content assist&nbsp;do eclipse é muito simples criar as animações, que pode ser feito através de xml&nbsp;ou pelo código java diretamente. O ideal é que animações simples, que não vão mudar ou não precisem de&nbsp;parâmetros&nbsp;que só serão fornecidos a tempo de execução sejam feitos em xml&nbsp;enquanto que as que precisem de informações a tempo de execução sejam feitas via código. Você também pode fazer uma mistura dos dois, se for uma animação grande e apenas uma pequena parte precisa ser definida em tempo de execução você pode guarda-la no xml&nbsp;e a tempo de execução carregar o xml&nbsp;e fazer os ajustes necessários no código.




Para salvar a animação no xml&nbsp;primeiro crie uma pasta em res&nbsp;chamada anim&nbsp;e adicione seus arquivos de animação xml&nbsp;lá. Por exemplo:&nbsp;



&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/animation_duration"
    android:fromXDelta="-100%"
    android:toXDelta="0%" /&gt;




Esse xml&nbsp;representa uma TranslateAnimation, com uma duração definida em outro recurso (da mesma forma como fazemos com strings) e a view&nbsp;animada sairá da posição -100%, ou seja o tamanho dela para esquerda, até a posição atual dela. Os outros tipos de animações funcionam de forma parecida. Não irei explicar todos pois é&nbsp;fácil&nbsp;entender com a documentação, content assistent&nbsp;e um pouquinho de conhecimento em inglês.



Para recuperar o objeto Animation a partir do xml&nbsp;é simples:



Animation animation = AnimationUtils.loadAnimation(this, R.anim.to_left_100);




Sendo o primeiro parâmetro o Context&nbsp;(que pode ser a própria Activity) e o segundo o nome do arquivo que você salvou sua animação.



E para criar uma animação direto no código? Muito simples também. O código a seguir executa a mesma animação definida no xml:

Animation animation = new TranslateAnimation(
    Animation.RELATIVE_TO_SELF, -100.0F, Animation.RELATIVE_TO_SELF, 0.0F,
    Animation.RELATIVE_TO_SELF, 0.0F, Animation.RELATIVE_TO_SELF, 0.0F);
animation.setDuration(getResources().getInteger(R.integer.animation_duration));



Agora já sabemos como criar e obter uma instância de Animation. Fazer essa animação ser executada por alguma view&nbsp;é bastante simples:



mView.startAnimation(animation);




Hoje nosso tutorial fica por aqui. No próximo iremos aprender alguns defeitos dessas animações, como corrigi-los e como integrar a animação com a aplicação de forma consistente e útil. Para treinar o que aprendemos aqui sugiro fazer um aplicativo teste com um botão e uma imagem. Ao clicar no botão a imagem de move em relação a ela e em relação a tela, rotaciona, aumenta e diminui, muda transparência... enfim, use sua criatividade. Depois faça a mesma coisa com o botão setando fillAfter como true e tente enxergar o defeito que iremos explicar no próximo post.



Até mais.