MotionLayout - Criando animações sem escrever código

O Google Play possui atualmente mais de 3 milhões de aplicativos e para se destacar neste mar de aplicativos é preciso algum diferencial, por vezes a diferença entre um aplicativo bom e um excepcional está nos detalhes do app, como as animações. Recentemente o Google anunciou uma nova biblioteca de Animação para o Android, o MotionLayout, visando simplificar o processo de animação no Android. Utilizando o MotionLayout é possível criar animações sem utilizar uma única linha código! Utilizando para isso somente arquivos de Layout. Nesta apresentação será demonstrado o funcionamento básico desta biblioteca através de exemplos de código, explicando o necessário para você começar a utiliza-la.

Transcript

1. MotionLayout Criando animações sem escrever código
2. Especialista Mobile Tomaz Silva(tomaz.silva@getnet.com.br)
3. Animações: Por que usar? Informação Foco Expressão
4. 2.800.000 aplicativos na Play Store Como se destacar em meio a tantos aplicativos?
5. "A diferença entre um aplicativo bom e um excepcional está nos detalhes" Silva, Tomaz
6. O que é? • Apresentado no Google IO 2018 • Subclasse do ConstraintLayout ◦ possui as todas as propriedades do ConstraintLayout • Possibilita animar transição entre 2 layouts de forma simples • Foco nas animações baseadas em interações • Totalmente Declarativo (xml)
7. Quando usar? Quando deseja animar, redimensionar ou alterar atributos de componentes de UI baseado em interações com o usuário
8. Principais Componentes
9. MotionLayout • Muito Similar ao ConstraintLayout ◦ Define os componentes de tela, suas propriedades e posições • Possui alguns atributos adicionais ◦ app:layoutDescription -> Define o MotionScene vinculado ao layout ◦ app:applyMotionScene -> Habilita os desabilita o motion scene ◦ app:showPaths -> Utilizado para auxiliar no desenvolvimento da animação, seta se o caminho da animação será visível ou não ◦ app:progress -> Permite setar o progresso da animação, utilizando um float entre 0 e 1
10. MotionScene • Responsável por definir o comportamento da animação • Define ou referência o estado inicial e final da animação • Define como será a transição entre os estados • Define a forma como será a interação com o usuário • As informações de posição e propriedades dos componentes de UI definidas aqui tem precedência em relação às informações do MotionLayout
11. ConstraintSet • Toda a animação terá pelo menos 2 ConstraintSet, um representando o estado inicial e outro o estado final da animação • Define posição, tamanho, propriedades de um ou mais componentes de tela
12. Comparação entre os componentes MotionLayout • Muito similar ao ConstraintLayout • Define a posição e propriedades dos componentes de UI • Referencia o arquivo MotionScene MotionScene • Responsável por orquestrar a animação • Define a transição referência o estado inicial e final da animação ConstraintSet • Define os estados da animação • Define posição, tamanho e propriedades de elementos de UI para um estado da animação
13. Implementação Just show the code ….
14. Primeiros passos
15. Definindo o estado inicial da animação
16. Definindo o estado final da animação
17. Definindo a MotionScene
18. Definindo a MotionScene
19. Primeiro Motion Layout
20. Primeiro Motion Layout
21. Resultado
22. Exemplo avançado
23. ConstraintSet Inicial
24. ConstraintSet Final
25. MotionScene
26. MotionLayout: Continua simples
27. Resultado
28. Outros Exemplos
29. Perguntas?
30. Obrigado!
31. Referências • Statista : Estatísticas Play Store • Material Design: Understand Motion • Google Samples • Documentação Android • Artigo Medium • CodeLab
32. Q & A - Standard Attributes
33. Q & A - Custom Attributes
34. Q & A - MotionScene
35. Q & A - Transition
36. Q & A - OnClick
37. Q & A - OnSwipe