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.

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.

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.

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.

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.

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.

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).

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.

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).

Figura 9. Como expandir o DrawerLayout.

DrawerLayout (2/2)

Este exemplo mostra como adicionar movimento a um DrawerLayout.

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.

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.

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).

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.

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.

Figura 15. Combinar efeitos para criar movimentos complexos.

Movimento complexo (2/3)

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

Figura 16. Combinar efeitos para criar movimentos complexos.

Movimento complexo (3/3)

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

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.

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.

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.

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.

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.

Figura 22. Movimentos diferentes com base no estado.