Ejemplos de MotionLayout

Este tema incluye ejemplos de cómo usar MotionLayout. Cada ejemplo incluye un GIF animado del 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.

Atributo personalizado: backgroundColor

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

ImageFilterView: transición de imagen

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

Posición del fotograma clave

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

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.

Ciclo de fotogramas clave

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

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

CoordinatorLayout (2/2)

En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para aportar movimiento a 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).

DrawerLayout (2/2)

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

Panel lateral

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

Paralaje

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

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

ViewPager: Lottie

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

Movimiento complejo (1/3)

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

Movimiento complejo (2/3)

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

Movimiento complejo (3/3)

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

Transición entre fragmentos (1/2)

En este ejemplo, se muestra cómo puedes usar MotionLayout para la 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.

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.

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.

Multiestado

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