Exemplos do MotionLayout

Testar o Compose

O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a usar animações no Compose.

Animações no Compose →

Este documento contém exemplos de como usar MotionLayout. Cada exemplo inclui um vídeo que demonstra o movimento, além do código correspondente para a cena e layouts do movimento.

Movimento básico

Este exemplo contém uma única visualização que você pode tocar e arrastar para mover horizontalmente.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 1. Arrastar uma visualização.

Atributo personalizado: backgroundColor

Este exemplo é semelhante ao Movimento básico. Além do movimento básico, a cor de fundo muda à medida que a visualização se move.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 2. Arrastar uma visualização enquanto a cor de fundo muda.

ImageFilterView: transição de imagens

Este exemplo mostra como fazer a transição do valor de saturação de uma ImageFilterView.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 3. Arrastar uma imagem enquanto a saturação muda.

Posição de frames-chave

Este exemplo usa <KeyFrameSet> para alterar a posição Y da visualização durante o movimento.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 4. Arrastar uma visualização e alterar a posição Y dela.

Interpolação de frames-chave

Este exemplo é criado na Posição do frame-chave, adicionando rotação e dimensionamento à transição da visualização.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 5. Arrastar uma visualização e alterar a posição Y, a rotação e a escala.

Ciclo de frames-chave

Este exemplo inclui elementos <KeyCycle> para adicionar movimento de onda à visualização.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 6. Arrastar uma visualização com um movimento ondulado enquanto altera a cor dela.

CoordinatorLayout (1/2)

Este exemplo adiciona um MotionLayout a um AppBarLayout já existente para adicionar movimento à barra de apps. Este exemplo é descrito em Introdução ao MotionLayout (parte III).

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 7. Rolar o conteúdo enquanto a barra do app se expande.

CoordinatorLayout (2/2)

Este exemplo adiciona um MotionLayout a um AppBarLayout já existente para adicionar movimento à barra de apps.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 8. Rolar o conteúdo enquanto a barra do app se expande e o texto é animado dentro e fora da barra do app.

DrawerLayout (1/2)

Este exemplo mostra como adicionar movimento a um DrawerLayout. Este exemplo é descrito em Introdução ao MotionLayout (parte III).

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 9. Como expandir o DrawerLayout.

DrawerLayout (2/2)

Este exemplo mostra como adicionar movimento a um DrawerLayout.

• Confira o XML do layout.
• Confira o XML MotionScene do conteúdo principal.
• Confira o XML MotionScene do menu.

Figura 10. Expandindo o `DrawerLayout` com texto de menu animado.

Painel lateral

Este exemplo mostra como exibir um painel lateral ao arrastar a área de conteúdo principal para a direita.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 11. Mostrando um painel lateral arrastando o conteúdo principal.

Paralaxe

Este exemplo demonstra um segundo plano paralaxe, em que diferentes camadas se movem em velocidades diferentes.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 12. Efeito de paralaxe na imagem do cabeçalho.

ViewPager

Este exemplo mostra como adicionar movimento ao deslizar entre guias ViewPager. Este exemplo é descrito em Introdução ao MotionLayout (parte III).

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 13. Efeito de paralaxe na imagem do cabeçalho ao deslizar um "ViewPager".

ViewPager: Lottie

Este exemplo mostra como adicionar movimento ao deslizar entre guias ViewPager.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 14. Uma imagem mostrando um efeito Lottie na imagem do cabeçalho enquanto desliza um "ViewPager".

Movimento complexo (1/3)

Este exemplo combina elementos de exemplos anteriores para demonstrar movimentos complexos.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 15. Combinar efeitos para criar movimentos complexos.

Movimento complexo (2/3)

Este exemplo combina elementos de exemplos anteriores para demonstrar movimentos complexos.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 16. Combinar efeitos para criar movimentos complexos.

Movimento complexo (3/3)

Este exemplo combina elementos de exemplos anteriores para demonstrar movimentos complexos.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 17. Combinar efeitos para criar movimentos complexos.

Transição de fragmentos (1/2)

Este exemplo mostra como usar MotionLayout para fazer a transição entre fragmentos.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 18. Transição de fragmentos.

Transição de fragmentos (2/2)

Este exemplo mostra como usar MotionLayout para fazer a transição entre fragmentos.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 19. Transição de fragmentos.

Movimento parecido com o YouTube

Este exemplo demonstra a transição entre uma visualização compacta e uma experiência em tela cheia com conteúdo extra.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 20. Transição de fragmentos semelhante ao YouTube.

KeyTrigger

Este exemplo demonstra como mostrar e ocultar um botão de ação flutuante quando a transição ultrapassa um limite de progresso.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 21. Mostrar e ocultar um botão de ação flutuante.

Estado múltiplo

Este exemplo mostra como usar o estado para determinar qual movimento aplicar.

• Confira o XML do layout.
• Confira o MotionScene XML.

Figura 22. Movimentos diferentes com base no estado.