Concrete Logo
Hamburger button

Animando no Android

  • Blog
  • 30 de Outubro de 2015
Share

Uma das características mais importantes para uma boa experiência do usuário em um aplicativo é a sensação de fluidez, ou seja, o usuário entender claramente a transição entre a ação realizada e seu resultado. É para isso que utilizamos as animações, para demonstrar uma transição de tela, uma transição de estado ou até mesmo apenas para dar aquele conforto visual na usabilidade. E é sobre essa parte da UX que vamos começar a falar neste post, tentando abordar princípios básicos das animações.

Uma das APIs mais básicas de animações em Android é a via “View properties”. Desde o Android 3.0 (API 11), as animações podem ser realizadas sobre as propriedades de uma view, como por exemplo a animação de alpha de uma view. Na primeira versão, uma das formas de se animar uma view era por meio de um ObjectAnimator como no exemplo abaixo:

ObjectAnimator.ofFloat(myView, “alpha”, 0f).start();

Apesar de fácil, essa abordagem tem alguns problemas de performance, uma vez que para transformar o nome da propriedade em método ela realiza operações de reflection. Outro problema é que cada animação dessa corresponde a um objeto diferente, o que pode gerar sobrecarga no processamento quando se anima várias propriedades simultaneamente.

Para resolver alguns dos problemas de performance e facilitar a vida dos desenvolvedores, o Google lançou na API 12 o que Chat Haase chamou de classe utilitária, a ViewPropertyAnimator. Além de melhorar a performance das animações, ela tornou a API mais fluente, como no exemplo abaixo:

myView.animate().alpha(0);

Mas agora chega de conversa e vamos a alguns exemplos práticos.

No nosso primeiro exemplo, vamos animar o “Alpha” de uma view para escondê-la ou mostrá-la. Como em todos os exemplos que usarei neste post, o código da animação é bastante simples:

Com este código, nós animamos a nossa view do estado atual (nesse caso visível) para o estado invisível, indicado pelo parâmetro zero. E para deixar a nossa animação com uma cara de Material, estou usando o FastOutSlowInInterpolator, que é o interpolator mais próximo das animações do Material Design. O método setDuration é apenas para definir a duração da nossa animação.

Caso seja preciso fazer alguma ação no fim da animação é necessário “setar” um AnimatorListener, que será chamado neste momento. O AnimatorListener exige que quatro métodos sejam implementados obrigatoriamente, mas não é necessário na maioria das vezes. Por isso, para não poluir o código do nosso exemplo, implementamos uma classe para tirar essa obrigatoriedade. Com isso, o código do nosso exemplo ficou da seguinte forma:

O resultado da nossa animação é esse:

No nosso segundo exemplo, vamos rotacionar a nossa view. Para isso, o código é basicamente o mesmo do exemplo anterior, mudando apenas a propriedade para rotation():

Veja como ficou:

O último exemplo que vamos mostrar neste post é o de translation. Nele, vamos movimentar nossa view pela tela e depois voltar para a posição inicial. Nós podemos movimentar nossa view tanto verticalmente quanto horizontalmente, e para isso utilizaremos dois métodos simultaneamente para animar a view nas duas direções, translationX() e translationY().

O resultado é esse:

E é isso! Essas foram algumas das animações mais básicas, mas que são muito úteis no Android. Se você quiser ver o código completo, está no GitHub. E se você ficou com alguma dúvida ou tem alguma sugestão, é só deixar seu comentário abaixo. Até a próxima!