Ejemplos de MotionLayout

Este documento contiene ejemplos de cómo usar MotionLayout. Cada ejemplo incluye un video que demuestra 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 sola vista que puedes tocar y arrastrar para moverla horizontalmente.

Figura 1: Arrastrar 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: Arrastrar una vista mientras cambia el color de fondo

ImageFilterView: transición de imagen

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

Figura 3: Arrastrar 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: Arrastrar una vista y modificar su posición Y

Interpolación del fotograma clave

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

Figura 5: Arrastrar una vista y modificar la posición Y, la rotación y la escala

Ciclo de fotogramas clave

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

Figura 6: Arrastrar una vista con un movimiento de onda mientras se modifica el color

CoordinatorLayout (1/2)

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

Figura 7: Desplazamiento 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 sumar movimiento a la barra de la app.

Figura 8: Se desplaza el contenido mientras se expande la barra de la app, y se anima el texto dentro y fuera 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 detalle en Introducción a MotionLayout (parte III).

Figura 9: Se expande `DrawerLayout`.

DrawerLayout (2/2)

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

Figura 10: Se expandió "DrawerLayout" con texto del menú animado.

Panel lateral

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

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

Paralaje

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

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

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 al deslizar 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: Imagen que muestra un efecto 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: Combinar efectos para crear movimientos complejos

Movimiento complejo (2/3)

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

Figura 16: Combinar efectos para crear movimientos complejos

Movimiento complejo (3/3)

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

Figura 17: Combinar efectos para crear movimientos complejos

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: Los fragmentos se transfieren de manera similar a YouTube.

KeyTrigger

En este ejemplo, se muestra 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.

Multiestado

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

Figura 22: Diferentes movimientos según el estado.