Animações no Android Part 1 – View Animations

Standard

Com o surgimento do material design no android L vários princípios de design foram criados e dentre eles um dos mais interessantes e o Meaningful Motion.

De forma muito rápida e resumida, Meaningful Motion ou em uma tradução directa, Movimentações com sentindo explica que em uma app, os componentes devem mover-se de forma que dêem uma pista visual ao utilizador sobre o efeito causado pela sua interacção com um determinado componente. Como exemplo disto podemos olhar para a animação que acontece no momento em que fazemos swipe para a direita para marcar  em um e-mail para marcar como lido no inbox, facilmente temos uma pista visual de que aquele elemento esta a sair de cena devido ao movimento do componente para a direita e seu desaparecimento.

A pesar deste principio ter sido muito enfatizado nos últimos meses com a introdução do Material design e boom de apps com animações super interessantes como mostra este showcase das melhores apps com material design em 2015, o android ja possuía mecanismos de animação de componentes bem antes do material design que no fundo consistem na base por detrás dos novos mecanismos utilizados nas super animações em algumas apps no video acima.

Como mencionei acima, o android possui 2 sistemas de animações nomeadamente:

Property Animation que nos permite animar as propriedades de um certo objecto sem que seja necessariamente um componente que ira aparecer na nossa UI(Uma view) e View Animation que é especificamente para animar Views(TextViews,Buttons, etc).

Este post está divido em 3 partes e irá consistir basicamente na explicação dos dois primeiros sistemas de animação mencionados acima e exemplos de como implementar animações cools como as que temos hoje em dia.

View Animation

Para este primeiro post, iremos falar sobre o View animation.

Como brevemente explicado acima, o View Animation System permite-nos animar propriedades de uma View como alpha(visibilidade), scale(tamanho), rotation(rotação), translation(movimentação) de forma individual ou ainda coordenar a animação destas diferentes propriedades de forma sequencial ou simultânea.

A razão pelo qual escolhi este primeiro sistema para iniciar a série, é pelo simples facto deste sistema estar disponível no framework desde as versões mais antigas do framework e acredito que seja a forma mais simples de estabelecer o contacto com um mundo das animações.

Para realizar uma animação sobre uma view utilizando este sistema, podemos fazer de 2 maneiras diferentes:

Definindo a animação no XML

Definir animações pelo XML e super simples e para o fazer basta:

  1. Criar uma pasta dentro da pasta res com o nome anim onde ficaram guardados os ficheiros de xml que definem uma animação.

animfodler

2. Criar um ficheiro XML dentro da pasta anim como mostra a imagem acima. É neste ficheiro que iremos definir qualquer animação que queiramos aplicar sobre uma view. A tag de raiz deste ficheiro pode ser uma animação em especifico como <alpha>(visibilidade), <scale>(tamanho),<rotate>(rotação), <translate>(movimentação horizontal no eixo do X ou vertical no eixo do Y) ou <set> que permite definir e coordenar diferentes animações.

Olhando para a imagem acima e explicando só a animação de visibilidade ou alpha, termos o ficheiro fade_animation.xml com a seguinte estrutura e conteúdo:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"
    android:toAlpha="0"
    android:duration="500"
    >
</alpha>

Como mencionei acima este ficheiro represente uma só animação e temos como a tag de raiz, a animação que pretendemos com atributos específicos que iram definir o seu comportamento. Neste exemplo, os atributos fromAlpha, toAlpha e duration representam a visibilidade  da View no inicio da animação que pode variar de 0(transparente) a 1(totalmente opaco), a visibilidade no fim da animação e a duração  da animação em milisegundos. Cada tipo de propriedade que podemos animar contem atributos diferentes e podem ver com mais detalhes no código disponibilizado no fim do post.

3. No nosso código java, temos só de carregar esta animação utilizando o método loadAnimation disponível na classe AnimationUtils como mostra o sample abaixo:

/*inicia uma animacao sobre uma view passando a view e o id da animacao que e o 
nome do ficheiro xml na pasta anim.*/
public void runAnimationFromXml(View view, int animResId){
    Animation animation = AnimationUtils.loadAnimation(this,animResId);
    view.startAnimation(animation);
}

E com 3 simples passos, vimos como definir e aplicar uma animação sobre uma view.

Uma limitação deste sistema de animações é que ele aplica animação sobre a view mas não modifica ou actualiza os valores no final da animação , isto é, se estivermos a fazer uma animação em que movemos um botão na horizontal 200dp, o botão ira movimentar-se e no fim ao clicar na nova posição em que conseguimos ver o botão,nada ira acontecer pois este não foi realmente desenhado na nova posição que deveria estar.

A forma de resolver isto seria calcular o valor da posição onde o botão estará e actualizar o botão invalidando a posição anterior e desenhando a nova no método onDraw()(Não liguem para isto agora). Este é um dos tópicos que irei abordar com mais detalhes no próximo post sobre o outro sistema de animações e demonstrar porque este é melhor que o que acabamos de ver.

A segunda forma de definir animações directamente pelo código java, passa por utilizar as classes disponíveis como AlphaAnimation, TranslateAnimation dentre outras que seguem o mesmo padrão <nomeDaPropriedade>+Animation para atingir o mesmo efeito. Neste post não irei falar sobre esta forma pois apesar de não ser muito prática, acho que deixa o código muito feio algo que podemos evitar com o primeiro método:)

E de forma muito simples e rápida conseguimos introduzir a um dos tópicos considerado complicado no android(ja foi para mim).
Espero por vocês para as próximas partes e ate la deixem o vosso comentário e partilhem com um amigo que acham que gostaria de ler este post 🙂

Aqui vai um gist com as partes relevantes e mais exemplos : https://gist.github.com/realdm/40ad4b0d121066be499c

DM

Advertisements