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:
- AlphaAnimation: Animação de transparência, torna o objeto opaco, transparente 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: Conjunto de animações a serem executadas 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 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:
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