Ejemplos de MotionLayout

Prueba hacerlo con Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a usar animaciones en Compose.
Animaciones en Compose →

En este documento, se incluyen ejemplos de cómo usar MotionLayout. Cada ejemplo incluye un video que muestra el movimiento, junto con el código correspondiente para la escena y los diseños de movimiento.

Movimiento básico

En este ejemplo, se incluye una vista única que puedes tocar y arrastrar para moverla horizontalmente.

Figura 1: Arrastra una vista.

Atributo personalizado: backgroundColor

Este ejemplo es similar al ejemplo de movimiento básico. Además del movimiento básico, el color de fondo de la vista cambia a medida que se mueve la vista.

Figura 2: Arrastra una vista mientras cambia su color de fondo.

ImageFilterView: transición de imagen

En este ejemplo, se muestra cómo hacer la transición del valor de saturación de un ImageFilterView.

Figura 3: Arrastra una imagen mientras cambia su saturación.

Posición del fotograma clave

En este ejemplo, se usa <KeyFrameSet> para modificar la posición Y de la vista durante el movimiento.

Figura 4: Arrastra una vista y modifica su posición Y.

Interpolación del fotograma clave

Este ejemplo se basa en el ejemplo de posición del fotograma clave, pero se agrega la rotación y el ajuste de la transición de vista.

Figura 5: Arrastra una vista y modifica su posición Y, rotación y escala.

Ciclo de fotogramas clave

En este ejemplo, se agregan elementos <KeyCycle> para aportar un movimiento de ondulación a la vista.

Figura 6: Arrastra una vista con un movimiento de ondulación mientras modificas su color.

CoordinatorLayout (1/2)

En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para aportar movimiento a la barra de la app. Este ejemplo se describe con más detalles en Introducción a MotionLayout (parte III).

Figura 7: Desplázate por el contenido mientras se expande la barra de la app.

CoordinatorLayout (2/2)

En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para aportar movimiento a la barra de la app.

Figura 8: Desplázate por el contenido mientras se expande la barra de la app y el texto entra y sale de la barra de la app.

DrawerLayout (1/2)

En este ejemplo, se muestra cómo agregar movimiento a un DrawerLayout. Este ejemplo se describe con más detalles en Introducción a MotionLayout (parte III).

Figura 9: Expande `DrawerLayout`.

DrawerLayout (2/2)

En este ejemplo, se muestra cómo agregar movimiento a un DrawerLayout.

Figura 10: Expande `DrawerLayout` con texto de menú animado.

Panel lateral

En este ejemplo, se indica cómo mostrar un panel lateral cuando se arrastra el área del contenido principal hacia la derecha.

Figura 11: Muestra un panel lateral arrastrando el contenido principal.

Paralaje

En este ejemplo, se muestra un fondo de paralaje, en el que diferentes capas de fondo se mueven a diferentes velocidades.

Figura 12: Efecto de paralaje en la imagen del encabezado imagen.

ViewPager

En este ejemplo, se muestra cómo puedes agregar movimiento cuando te deslizas entre las pestañas de ViewPager. Este ejemplo se describe con más detalles en Introducción a MotionLayout (parte III).

Figura 13: Efecto de paralaje en la imagen del encabezado mientras se desliza un `ViewPager`.

ViewPager: Lottie

En este ejemplo, se muestra cómo puedes agregar movimiento cuando te deslizas entre las pestañas de ViewPager.

Figura 14: Una imagen que muestra un efecto de Lottie en la imagen del encabezado mientras se desliza un `ViewPager`.

Movimiento complejo (1/3)

En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.

Figura 15: Combina efectos para crear un movimiento complejo.

Movimiento complejo (2/3)

En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.

Figura 16: Combina efectos para crear un movimiento complejo.

Movimiento complejo (3/3)

En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.

Figura 17: Combina efectos para crear un movimiento complejo.

Transición entre fragmentos (1/2)

En este ejemplo, se muestra cómo puedes usar MotionLayout para la transición entre fragmentos.

Figura 18: Transición entre fragmentos.

Transición entre fragmentos (2/2)

En este ejemplo, se muestra cómo puedes usar MotionLayout para la transición entre fragmentos.

Figura 19: Transición entre fragmentos.

Movimiento similar a YouTube

En este ejemplo, se muestra la transición entre una vista compacta y una experiencia de pantalla completa con contenido adicional.

Figura 20: Transición entre fragmentos similar a YouTube.

KeyTrigger

En este ejemplo, se indica cómo mostrar y ocultar un botón de acción flotante cuando la transición supera un umbral de progreso.

Figura 21: Muestra y oculta un botón de acción flotante.

Varios estados

En este ejemplo, se muestra cómo usar el estado para determinar qué movimiento aplicar.

Figura 22: Diferentes movimientos según el estado.