Animações com o MotionLayout — Parte 1
Criar animações para a interface nem sempre foi uma tarefa muito divertida, embora que quando bem feitas elas são bonitas de se ver, é necessário muito código e ficheiros layout longos para que a magia aconteça.
Com o aparecimento do ConstraintLayout tornou-se possível criar animações com poucas linhas de código, mas os ficheiros layout longos continuam.
O MotionLayout veio para resolver isso, com algumas tags de xml e zero código é possível criar animações bem decentes.
Esta série está divida da seguinte forma:
- Introdução ao MotionLayout
- Animações com o MotionLayout Parte I (Básico) (Estamos aqui)
- Animações com o MotionLayout Parte II (Intermédio)
- Animações com o MotionLayout Parte III (Complexo)
Antes de colocarmos a mão na massa, é importante perceber os seguintes conceitos:
- MotionScene
- ConstraintSet
- Custom Attribute
MotionScene
A diferença principal entre o ContraintLayout e o MotionLayout é que o ConstraintLayout descreve todas as suas animações e os elementos do layout num mesmo ficheiro xml, o que por vezes pode causar alguma confusão a medida que o ficheiro vai crescendo e acabamos nos perdendo no meio de tantas tags.
O MotionLayout, por outro lado, deixa tudo separado, isto é, ele coloca toda a informação relativa às animações em um ficheiro separado permitindo-nos focar em uma coisa de cada vez. Esse ficheiro é chamado de MotionScene.
É no MotionScene onde definimos:
- ConstraintSets
- Transições
- Ações de toque
- Keyframes, e outros.
ConstraintSet
O ConstraintSet agrupa todas as regras de posicionamento para o seu layout, isto é, o posicionamento dos seus elementos. Tu podes utilizar vários ConstraintSets, eles permitem alterar a posição e dimensões dos seus elementos sem precisar ter que recriá-las.
Custom Attribute
Para alem agrupar as regras de posicionamento do layout, o ConstraintSet pode levar consigo um Custom Atribute, que são basicamente atributos (cor, largura, cumprimento, etc) de um determinado elemento do ConstraintSet. Esses atributos podem ser alterados durante as animações e transições.
Esses conceitos parecem ser um bocado difíceis de perceber no inicio mas com o exemplo que trago aqui irás percebê-los melhor.
Mas antes de começarmos, certifique-se que:
- Tenhas o Android Studio 3.1.3 (ou versão superior)
- Entendas um bocado de ConstraintLayout.
Vamos a isso!
Está na hora de criarmos a nossa primeira animação. Vamos começar com algo bem básico:
Temos dois eventos na tela acima:
- Um quadrado que é arrastado para baixo e para cima através do toque;
- A sua cor muda durante a transição;
Primeiro vamos criar o quadrado, arrastá-lo cima à baixo e por ultimo alterar a sua cor no processo.
1. Arrastar o quadrado
Para começar, vamos criar dois ficheiros layout, um com o quadrado no topo da tela e o outro com o quadrado na parte inferior. Vou chamar de motion_start e motion_end, respectivamente.
Primeiro layout:
Segundo layout:
Perfeito! Estamos quase lá.
Precisamos criar o nosso MotionLayout, e para fazer isso é muito simples. Para este exemplo vamos utilizar o activity_main.xml como o MotionLayout.
Por defeito, ao criarmos um ficheiro layout ele vem com o ConstraintLayout como raiz. Nós vamos converter o ConstraintLayout doactivity_main para MotionLayout da seguinte forma:
Substituindo: <android.support.constraint.ConstraintLayout.../>
Por: <android.support.constraint.motion.MotionLayout…/>
Após a conversão, vamos adicionar o quadrado no layout. Ficará assim:
Lembras-te do MotionScene? Precisamos indicar ao MotionLayout onde está o seu MotionScene, fazemos isso através do layoutDescription=”@xml/scene”. Todas as animações e transições serão definidas no scene.xml.
Onde:
Transitions: Define todos os parâmetros para a transição entre os layouts. Faz a transição do layout motion_start para o motion_end.
OnSwipe: Permite fazer a transição acompanhando o movimento do dedo.
touchAnchorId: Indica o objecto que iremos acompanhar com o movimento do dedo, neste caso a box.
touchAnchorSide: Indica o lado do objecto que irá acompanhar o movimento do dedo, que é o lado inferior do quadrado (bottom).
dragDirection: Indica a direção do movimento (dragUp).
Corremos a app e voilà….!
Tu provavelmente deves estar a pensar: “Porquê tantos ficheiros layout? 😒 Pensei que MotionLayout fosse tornar tudo mais simples e organizado! Edilson tu és um mentiroso!!!!!😡”
Calma ai, não é o fim do mundo, na verdade nós podemos aproveitar ainda mais o MotionLayout utilizando um conceito que chamamos de MotionScene Independente.
Um MotionScene Independente permite-nos agrupar todos ConstraintSets num mesmo ficheiro, eliminando a necessidade de se criar vários ficheiros layout com os elementos em posições diferentes. Vamos adicionar dois ConstraintSets ao nosso MotionScene (scene.xml), um indicando a posição do quadrado na parte superior da tela e o segundo para a parte inferior.
Ficará assim:
E o resultado é o mesmo:
Como podes ver, o constraintSetEnd e o constraintSetStart já não estão a apontar para o motion_end e o motion_start mas sim para os ConstraintSets (end e start) com as posições do nosso quadrado. Podes eliminar os ficheiros motion_start e motion_end pois eles já não têm nenhuma utilidade.
2. Alterar a cor
Para alterar a cor do quadrado vamos precisar apenas definir um CustomAttribute para cada ConstraintSet indicado a cor para cada estado.
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#008577"/>Onde:
attributeName: É o nome atributo
customColorValue: É o valor do atributo, nesse caso, a cor.
Adicionando CustomAttributes ao nosso MotionScene:
Resultado:
E já está, com algumas tags e zero código conseguimos criar a melhor animação do mundo. Muito bom, já podes trabalhar para empresas como Google e Facebook. 🙌🏽👏🏽😎
Bônus
No próximo artigo vamos ver algumas animações mais elaboradas e um bocado mais interessantes. Vamos utilizar os Keyframes que irão que permitir fazer alterações ao objecto num determinado instante da sua transição. Por exemplo:
É isso!
Chegamos ao fim artigo, acho que com esta introdução já podemos aprofundar um bocado mais o MotionLayout. No próximo artigo veremos mais tributos do MotionLayout, e claro, trarei alguns exemplos.
Aqui vai o link para o exemplo que acabamos de ver.
Se tiver alguma questão ou sugestão deixe aí nos comentários e não hesite em contactar-me pelo email: edilsonngulele@gmail.com ou twitter: @edilson_ngulele
Obrigado e até a próxima!
Obrigado Paulo Enoque pela revisão!
