terça-feira, 17 de julho de 2012

Animando aplicativos com Animation - Parte 1

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 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 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: 

  1. AlphaAnimation: Animação de transparência, torna o objeto opaco, transparente  ou semi-transparente;
  2. RotateAnimation: Animação de rotação, rotaciona o objeto em volta de um ponto pivot;
  3. ScaleAnimation: Animação de escala, aumenta e diminui o tamanho do objeto;
  4. TranslateAnimation: Animação de translação, movimenta o objeto na tela;
  5. AnimationSet: Conjunto de animações a serem executadas simultaneamente.
Há algumas propriedades do Animation que é importante entender:

  1. duration: É o tempo que a animação irá levar para ser totalmente executada;
  2. fillAfter: Propriedade que informa se o resultado da animação deve continuar depois do termino da animação ou não;
  3. 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);
  4. repeatMode: A forma como o repeat se dará, RESTART (volta para o inicio da animação) ou REVERSE (faz a animação reversa);
  5. startOffset: Delay em milissegundos a ser aguardado antes da animação ser executada.
Sabendo desses princípios e usando o content assist do eclipse é muito simples criar as animações, que pode ser feito através de xml ou pelo código java diretamente. O ideal é que animações simples, que não vão mudar ou não precisem de parâmetros que só serão fornecidos a tempo de execução sejam feitos em xml 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 e a tempo de execução carregar o xml e fazer os ajustes necessários no código.

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

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

Esse xml representa uma TranslateAnimation, com uma duração definida em outro recurso (da mesma forma como fazemos com strings) e a view 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 é fácil entender com a documentação, content assistent e um pouquinho de conhecimento em inglês.

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

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

Sendo o primeiro parâmetro o Context (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 é 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.

1 comentários:

Anônimo at 23 de abril de 2015 às 11:06 disse...

Como que eu posso fazer o load de obj, fbx e m3g do java para um game animado em segunda dimensão?

Postar um comentário

 
© 2011 Tutoriandroid | Recode by Ardhiansyam | Based on Android Developers Blog