en desarrollo, educación, innovación, otros
java

Motion Editor

Cuando se habla de desarrollo de aplicaciones en Android, es inevitable que nos venga la cabeza Android Studio. Si no estás familiarizado con este mundo, puede que te suene de algo. Android Studio es el IDE (Entorno de Desarrollo Integrado) oficial para el desarrollo de Apps para Android.
Desde que Google lo publicase en 2014, Android Studio ha ido creciendo tanto como el propio Sistema Android, añadiendo nuevas herramientas y funcionalidades con cada actualización.

Con la publicación de Android 11 a la vuelta de la esquina, se ha publicado recientemente la versión 4.0 de Android Studio. Entre sus novedades, destaca el nuevo editor de animaciones: Motion Editor.

Las animaciones antes de Motion Editor;

Una animación es un cambio visual que realiza un elemento en pantalla: puede ser un movimiento, una transición, etc. Las animaciones son útiles para informar de un cambio de estado o cuando se realiza alguna acción. Además, las animaciones proporcionan aspecto de acabado y calidad a una App.

Antes de existir el nuevo editor, animar un elemento visual en una vista Android requería programar la animación con código:
Mediante el uso de recursos de animación en lenguaje XML
Haciendo uso de las clases que proporciona la librería de Android, en Java o Kotlin.

El principal inconveniente de este método, además de tener que escribir varias líneas de código para animar un objeto, es que para ver el resultado de la animación es necesario simular la App en un dispositivo. Todo esto hace que crear animaciones en una App pueda resultar algo tedioso.

Descubriendo Motion Editor

Motion Editor es la nueva herramienta que incorpora Android Studio para la creación de animaciones. El editor proporciona una interfaz simple para manipular elementos haciendo uso de la API MotionLayout.
Con este editor se puede crear distintos tipos de animaciones de forma visual. Automáticamente, se genera el archivo XML de la animación, por lo que no hará falta el uso de código. Además, permite ver el resultado en tiempo real desde el mismo editor, por lo que se ahorrará tiempo al no tener que simular la App para ello.

Por ahora, para poder usar el Motion Editor, hace falta incluir la versión 2.0.0 beta de la librería de ConstraintLayout. Una vez incluida, habrá que convertir nuestro ConstraintLayout a MotionLayout. Una vez hecho ésto, en el modo diseño del layout podremos ver el Motion Editor.

Para realizar una animación básica, basta con añadir el elemento que queremos animar al layout. De dicho elemento, podemos configurar el estado que tendrá al iniciar la animación, y el estado que mostrará al finalizar. Por último, se selecciona un tipo de transición o animación para el elemento, la duración de la misma y la acción a realizar para que se reproduzca (por ejemplo, la pulsación de un botón).

Al pulsar el botón Play, podemos visualizar el resultado. En el siguiente vídeo se muestra una animación sencilla.

El editor aún está en fase beta. Se observan detalles que faltan por pulir, pero es totalmente funcional.
Las acciones realizadas con el editor se “escriben” en un recurso XML generado automáticamente. Se puede ver a continuación, junto con un vídeo de la App con la nueva animación simulada en un dispositivo.

Como se decía la inicio, Android Studio mejora con cada actualización. Con el editor de animaciones Motion Editor, Google por fin mejora una funcionalidad que parecía algo olvidada.
Puedes leer más acerca del Motion Editor en la documentación oficial de Android.

SERGIO VELASCO

Profesor de DESARROLLO ANDROID + PROYECTOS

Contacta con nosotros

No estamos en todo momento. Sin embargo, nos puede enviar un correo electrónico y nos pondremos en contacto con usted, lo antes posible.

mejora vida con tecnologia