Advertisement
  1. Code
  2. Android SDK

Introducción a Material Motion en Android

by
Read Time:7 minsLanguages:

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

El lenguaje de Material Design se creó para abordar problemas con el diseño plano en pantallas más pequeñas al proporcionar pistas visuales a elementos interactivos. En este artículo aprenderás sobre algunos de los conceptos fundamentales de la animación y cómo se pueden usar para proporcionar una sensación natural y realista a los elementos. Verás cómo usar estas ideas para deleitar a tus usuarios mientras los ayudas a comprender la interfaz de usuario de tu aplicación.

Ideas centrales de Material Motion

Google sugiere que todas las animaciones deben ser adaptables, naturales, conscientes e intencionales. Los objetos en la pantalla deben actuar como si estuvieran hechos de materiales específicos, con su propio peso y volumen que determinan cómo se mueven y actúan en la pantalla.

Las animaciones que ocurren deben estar directamente correlacionadas con una acción y deben sentirse decididas y vivas. Deben ser significativos y ayudar a guiar al usuario a través de tu aplicación teniendo un propósito y cumpliendo ese propósito. Las animaciones deberían crear contexto para tus usuarios y ayudar a guiar sus ojos en la pantalla para que sepan lo que es posible con tu aplicación.

El movimiento debería estar más preocupado por la cantidad de tiempo que lleva pasar del punto A al punto B, en lugar de la distancia que necesita cubrirse. Las distancias cambiarán según el tamaño de la pantalla, pero la velocidad de un objeto agregará énfasis y ayudará al usuario a comprender lo que está sucediendo.

Cuando un objeto necesita ser eliminado y otro agregado a la pantalla (como un botón que cambia de reproducción a pausa), entonces debes transformar el primer objeto en el segundo. Del mismo modo, puedes señalar un cambio significativo en un objeto cambiando el color y el alfa del elemento de la pantalla. De esta manera, los usuarios son conscientes de lo que ha cambiado, y puedes enfatizar lo que está disponible en tus aplicaciones para que los usuarios interactúen.

La ilusión de la vida

Una de las mayores referencias para comprender las animaciones naturales es el libro The Illusion of Life de Frank Thomas y Ollie Johnston, que tiene un capítulo que detalla los principios de animación utilizados por Disney en sus películas animadas. Thomas y Johnston describen 12 principios fundamentales en su libro. En esta sección discutiremos algunos de estos principios y cómo se pueden relacionar con el diseño de materiales.

Compresión y extensión

Cuando un objeto progresa a través de una acción, mostrará cambios en su forma en función del material del que está hecho.

Este concepto está representado por el principio Squash y Stretch, que puede ilustrarse mejor pensando en una pelota que rebota. A medida que las fuerzas externas actúan sobre la pelota, como la gravedad o la aceleración hacia arriba, la pelota se estirará. Cuando el objeto toca el suelo, se amontonará y se aplastará hacia la superficie. Los objetos que se mueven e interactúan con las superficies en tu aplicación deben usar esta idea para dar la ilusión de peso y volumen a tu objeto a medida que se mueve.

Stretch and Squash principle in animationStretch and Squash principle in animationStretch and Squash principle in animation

Anticipación

No se deben realizar acciones importantes de la nada. Al realizar una animación en tus aplicaciones, debes tener otra acción más pequeña que conduzca a la animación principal. Este principio se llama anticipación y ayuda a prevenir la situación en la que tu usuario pregunta: "¿Por qué sucedió esto?" El movimiento natural generalmente comienza con un calentamiento en lugar de simplemente comenzar. En Android, puedes usar la clase AnticipateInterpolator para crear una animación que primero retroceda una pequeña distancia antes de avanzar.

Puesta en escena

El propósito de la puesta en escena es hacer que tu contenido sea claro y comprensible para tus usuarios. Tu interfaz de usuario y tus animaciones deben sentirse naturales y ancladas a una tarea o concepto central, en lugar de dejar a tu usuario inseguro de por qué sucedió algo de una manera particular. Solo debes realizar una acción importante a la vez para mantener las cosas simples y deliberadas.

Acción de seguimiento y superposición

Cuando un objeto en movimiento se detiene, no todo se detiene a la vez (salvo a que golpee otro objeto sólido, pero ahí es donde entra en juego Stretch and Squash). Los apéndices de un objeto continuarán moviéndose por un corto tiempo después de que el núcleo del objeto se haya detenido.

Al crear animaciones de material, debes intentar usar dos posiciones diferentes: el punto de detención deseado y uno que está un poco más adelante, en el que tu animación puede detenerse por completo y luego volver a su posición final. Esto evita que tu animación parezca plana y mecánica. Este tipo de animación se puede lograr utilizando las clases BounceInterpolator u OvershootInterpolator.

Slow In y Slow Out

El movimiento natural no ocurre a una velocidad constante, y tampoco deberían tus animaciones.

Cuando un objeto se mueve desde fuera del campo de visión y entra en la pantalla, debe hacerlo rápidamente y luego reducir la velocidad a medida que llega a su posición final. El movimiento rápido captará la atención de tu usuario y le dará tiempo suficiente para que note dónde termina.

Inversamente, un objeto que sale de la pantalla debe comenzar lentamente y acelerarse a medida que sale de la pantalla. Esto le dará a tu usuario suficiente tiempo para notar que el objeto se está moviendo y, a medida que se acelere para irse, comprenderá que debe dejar de preocuparse por ese elemento en la pantalla.

Cuando un objeto se mueve de una posición en la pantalla a otra, sin salir de la pantalla en ningún momento, debes combinar estas dos ideas para que el usuario vea lo que sucede mientras tu animación mantiene una sensación natural. Este principio también se aplica a las listas, ya que se desplazarán rápidamente cuando un usuario las arroje y luego disminuirán la velocidad hasta que se detengan. Cuando una lista salta entre secciones, se vuelve menos inmersiva y se siente mecánica. Puedes usar LinearOutSlowInInterpolator, FastOutLinearInInterpolator o FastOutSlowInInterpolator para agregar estos efectos de animación.

Arcos

Con muy pocas excepciones, el movimiento natural ocurre en arcos en lugar de líneas rectas precisas. Al mover objetos por la pantalla, además del principio lento de entrada y salida, debes intentar mover el objeto en un camino arqueado para evitar una sensación mecánica y antinatural en tu animación. Puedes usar el objeto Android ArcMotion para mover tus objetos a lo largo de una ruta curva.

Acción secundaria

Las acciones secundarias son acciones más pequeñas y simples que apoyan la idea de la acción principal que ocurre. Las acciones secundarias no deberían eclipsar o parecer más interesantes que la acción principal, ya que existen simplemente para enfatizar.

Un ejemplo de una acción secundaria sería cuando abres el cajón de navegación en una aplicación de Android. Si bien el cajón deslizante se abre como la acción principal, el ícono de la hamburguesa a la animación de flecha es un efecto simple que enfatiza lo que ocurre sin eclipsar el cambio principal en la pantalla.

Sincronización

Cuando se trabaja con animaciones, el tiempo lo es todo. Si una animación se mueve demasiado lenta o rápidamente, el usuario notará que algo se siente "apagado".

Es importante recordar que Material Design requiere que los objetos aparezcan como si estuvieran hechos de algún tipo de material. Si un objeto se siente como un papel deslizándose sobre una superficie, entonces no debe moverse rápidamente por la pantalla. Es comprensible que no haya una fórmula segura para las velocidades de animación en las aplicaciones, pero con algo de tiempo y práctica, deberías ser capaz de crear animaciones oportunas que se ajusten al tema y al propósito de tu aplicación.

Conclusión

Ahora que conoces los conceptos principales de Material Motion y algunos de los principios fundamentales de la animación, puedes comenzar a jugar con las diversas herramientas disponibles para animar tu aplicación y agregar un poco de pop extra para deleitar a tus usuarios.

Si deseas obtener más información sobre la creación de animación en Android, consulta el curso detallado Animate Your Android App de Ashraff Hathibelagal, aquí en Envato Tuts+.

¡O echa un vistazo a algunos de nuestros otros tutoriales sobre animación en Android!

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