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.
José Antonio
¡Hola! Soy José Antonio, ¿en qué puedo ayudarte?
Trabajo como game designer y programador de videojuegos desde el año 2012 y soy profesor de la asignatura Unity y Game Design en Estech.
He trabajado durante años en reconocidos estudios de videojuegos y en reconocidos proyectos para The Game Kitchen y Genera Games.
Si estás aquí y te ha interesado este artículo puede que te guste este sector tanto como a mi. Si tienes cualquier duda, estaré encantado de ayudarte.
