Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Creando animaciones con MotionLayout para Android

by
Read Time:9 minsLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

Gracias a su notable versatilidad, el widget ConstraintLayout se ha convertido en la "navaja suiza" de los diseños para los desarrolladores de aplicaciones de Android. Sin embargo, agregar animaciones complejas a su contenido, aunque es posible, puede llevar bastante tiempo. Es por eso que Google introdujo el widget MotionLayout en I/O 2018.

El widget MotionLayout, que ahora forma parte de la biblioteca de soporte de Android, amplía el widget ConstraintLayout. Es un widget único que te permite animar tu contenido de forma declarativa utilizando solo XML. Además, ofrece un control detallado sobre todas tus animaciones.

En este tutorial, te mostraré cómo agregarlo a tus proyectos de Android Studio y crear algunas animaciones diferentes con él.

Prerrequisitos

Para seguir este tutorial, necesitarás:

  • Android Studio 3.1.3 o superior.
  • Un dispositivo o emulador que ejecute el nivel de API de Android 21 o superior.
  • Una comprensión básica del widget ConstraintLayout.

1. Agregar dependencias

Para poder utilizar el widget MotionLayout en tu proyecto de Android Studio, debes tener la última versión de la biblioteca de compatibilidad de "Constraint Layout" como dependencia de implementation. Además, para evitar conflictos de versiones, asegúrate de incluir una dependencia para la última versión estable de la biblioteca de soporte de appcompat v7.

En consecuencia, agrega el siguiente código al archivo build.gradle del módulo app:

2. Define un diseño

El widget MotionLayout puede hacer todo lo que puede hacer el widget ConstraintLayout. Por lo tanto, puedes reemplazar libremente cualquier instancia de este último con el primero. Sin embargo, por ahora, te sugiero que crees un nuevo archivo XML de diseño y le agregues el widget MotionLayout como elemento raíz.

A lo largo de este tutorial, animaremos un widget ImageView. Así que agrégalo como el primer hijo del diseño.

Puedes utilizar cualquier elemento de diseño como fuente del widget ImageView. En el código anterior, estoy usando un color dibujable.

A continuación, agrega un botón que puedes presionar para iniciar las animaciones. El siguiente código te muestra cómo colocarlo en el centro del diseño:

Además, para monitorear el progreso de las animaciones, agrega un widget SeekBar al diseño y colócalo debajo del botón. De esta manera:

Por último, debido a que hay un controlador de eventos al hacer clic asociado con el botón, asegúrate de definirlo en tu actividad.

3. Crea una escena de movimiento

Es posible que hayas notado que no agregamos ninguna restricción al widget ImageView al definir el diseño. Eso es porque los agregaremos a una escena en movimiento. Una escena de movimiento es un archivo XML que contiene detalles sobre la animación que deseas crear con un widget MotionLayout.

Para crear una nueva escena de movimiento, crea un archivo de recursos XML y agrégale un elemento MotionScene.

Una escena de movimiento contiene elementos ConstraintSet que especifican las restricciones que se deben aplicar a un widget en diferentes puntos de la animación. Los archivos de escenas de movimiento suelen contener dos conjuntos de restricciones: uno para el comienzo de la animación y otro para el final.

El siguiente código te muestra cómo crear dos conjuntos de restricciones que ayudarán al widget MotionLayout a mover el widget ImageView desde la esquina inferior derecha de la pantalla a la esquina superior izquierda:

Ten en cuenta que cada elemento ConstraintSet siempre debe especificar tanto la posición deseada como el tamaño deseado. Esto es importante porque sobrescribirá cualquier información de diseño configurada previamente.

Para ayudar al widget MotionLayout a comprender el orden en el que se deben aplicar los conjuntos de restricciones, a continuación, debes crear un elemento de transición (Transition). Mediante el uso de sus atributos constrintSetStart y constrintSetEnd de nombre intuitivo, puedes especificar qué conjunto se debe aplicar primero y cuál último. El elemento Transition también te permite especificar la duración de la animación.

En este punto, la escena de movimiento está completa. Sin embargo, el widget MotionLayout todavía no lo sabe. Así que vuelve al archivo XML de diseño, agrega un atributo layoutDescription al widget y establece su valor en el nombre del archivo de escena de movimiento.

Si el nombre de tu archivo de escena de movimiento es my_scene.xml, tu widget MotionLayout ahora debería verse así:

4. Iniciar la animación

Cuando ejecutas la aplicación, el widget MotionLayout aplicará automáticamente el conjunto de restricciones especificado en el atributo constraintSetStart del elemento Transition. Por lo tanto, para iniciar la animación, todo lo que necesitas hacer es llamar al método transitionToEnd() del widget. El siguiente código, que debe agregarse al controlador de eventos al hacer clic que creaste en un paso anterior, te muestra cómo:

En este punto, si ejecutas la aplicación y presionas el botón, deberías poder ver el widget ImageView moverse suavemente por la pantalla.

5. Manejar eventos de animación

Al adjuntar un objeto TransitionListener al widget MotionLayout, puedes monitorear de cerca el progreso de la animación.

La interfaz TransitionListener tiene dos métodos abstractos y Android Studio generará automáticamente resguardos para ellos.

El método onTransitionCompleted() se llama cuando se completa una transición de un conjunto de restricciones a otro. Por ahora, usémoslo para restablecer las restricciones del widget ImageView llamando al método transitionToStart() dentro de él.

Se llama al método onTransitionChange() cada vez que cambia el progreso de la animación. Como tal, el progreso es un número de punto flotante que se encuentra entre cero y uno. El siguiente código muestra cómo actualizar SeekBar según el progreso de la animación:

Continúa y ejecuta la aplicación nuevamente para ver dos animaciones ahora.

6. Crea fotogramas clave

En nuestra animación, el widget ImageView se mueve en una ruta que parece una línea recta. Esto se debe a que el widget MotionLayout tiene solo dos puntos para trabajar: el punto de inicio, que está en la esquina inferior derecha de la pantalla, y el punto final, que está en la esquina superior izquierda de la pantalla. Si deseas modificar la forma de la ruta, deberás proporcionar algunos puntos intermedios, que se encuentran entre los puntos inicial y final. Para hacerlo, deberás crear nuevos fotogramas clave.

Sin embargo, antes de comenzar a crear fotogramas clave, debes agregar un elemento KeyFrameSet al elemento Transition de tu escena de movimiento. Dentro del nuevo elemento, puedes crear cualquier número de fotogramas clave.

El widget MotionLayout admite muchos tipos diferentes de fotogramas clave. En este tutorial, trabajaremos con solo dos tipos: fotogramas KeyPosition y fotogramas KeyCycle.

Los fotogramas KeyPosition son los que te ayudan a modificar la forma de la ruta. Mientras los creas, asegúrate de proporcionar el ID del widget de destino, una posición a lo largo de la línea de tiempo, que puede ser cualquier número entre 0 y 100, y las coordenadas X o Y deseadas especificadas como un porcentaje. Las coordenadas pueden ser relativas a los ejes X o Y reales o ser relativas a la ruta en sí.

El siguiente código muestra cómo crear dos fotogramas clave que obligan al widget ImageView a seguir una ruta que evita colisiones con el botón y la barra de búsqueda:

Si ejecutas la aplicación ahora, deberías ver una animación que se ve así:

Por supuesto, puedes agregar más fotogramas clave. Por ejemplo, al agregar el siguiente fotograma clave hacia el final de la línea de tiempo, puedes hacer que el widget ImageView siga una ruta más ondulada:

Al usar un fotograma KeyCycle junto con los fotogramas KeyPosition, puedes agregar oscilaciones a la animación. Mientras lo creas, debes proporcionar nuevamente el ID del widget de destino, una posición a lo largo de la línea de tiempo y el valor deseado de la propiedad que debe oscilar hacia adelante y hacia atrás. Además, debes configurar un oscilador proporcionando detalles como la forma de onda que se utilizará y el período de onda.

El siguiente código crea un frame KeyCycle que usa un oscilador de onda sinusoidal para rotar periódicamente el widget ImageView 50 grados:

Al ejecutar la aplicación nuevamente, deberías ver una animación que se ve así:

7.Hacer interactivos los widgets animados

Durante todo este tiempo, has estado presionando un botón para iniciar la animación. Sin embargo, este botón no siempre es necesario porque el widget MotionLayout te permite adjuntar directamente controladores de eventos táctiles a los widgets que se están animando. Actualmente, es compatible con los eventos al hacer clic y al deslizar.

Por ejemplo, puedes agregar el siguiente elemento OnClick, que apunta al widget ImageView, dentro del elemento Transition de tu escena de movimiento para hacer que el botón sea redundante:

De manera similar, puedes usar un elemento OnSwipe para permitir que el usuario arrastre manualmente el widget ImageView por la pantalla. Mientras creas el elemento, debes asegurarte de proporcionar la dirección de arrastre correcta y el lado del widget que debe actuar como el controlador de arrastre.

Si vuelves a ejecutar la aplicación, ahora deberías poder arrastrar el widget ImageView.

Conclusión

Ahora sabes cómo usar el widget MotionLayout para agregar rápidamente animaciones complejas e interactivas a tus aplicaciones de Android. Puedes estar seguro de que las animaciones se ejecutarán sin retrasos ni fluctuaciones en la mayoría de los dispositivos, siempre que evites las vistas anidadas.

Vale la pena señalar que las próximas versiones de Android Studio incluirán un editor de movimiento visual, que probablemente mejorará aún más la usabilidad del widget.

Para obtener más información, consulta la documentación oficial.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.