Animación: salto

Recientemente una llamada de auxilio me llamó la atención; preguntando cómo implementar una elegante animación de "obtención de ubicación" en Android:

- http://drbl.in/2470871 por @lekarew

Inmediatamente pensé que este era un candidato principal para un AnimatedVectorDrawable (AVD en adelante), así que me propuse demostrar una forma de implementar esto. Algunas personas preguntaron cómo hice esto ... así que aquí hay un desglose.

Para una introducción a las capacidades de AnimatedVectorDrawable, recomiendo esta publicación de Alex Lockwood

contorno

En cuanto a la composición, se compone de tres tipos de animación:

  1. El pin se mueve y cambia de forma para hacerlo saltar; AVD admite esto al animar la forma real de una ruta, conocida como transformación de ruta.
  2. Los puntos se mueven hacia la izquierda, esta será una traducción simple.
  3. Los puntos se desvanecen hacia adentro y hacia afuera a medida que entra / sale de la escena.

Rastreo

Desafortunadamente no tuve acceso a la obra de arte de origen, solo el GIF en dribbble ... ¡espero que no tengas que hacer esto en tus animaciones!

Abrí el GIF en Photoshop, que proporciona una vista de línea de tiempo de los cuadros de la animación. Pasé por esto y guardé copias de fotogramas donde el pin estaba en extremos de movimiento, es decir, a punto de cambiar de dirección o de forma significativa. Estas "poses" serán las formas entre las que se transformará el pin. En total hubo 5 poses principales.

Pegué cada uno de estos en Sketch (mi herramienta de dibujo vectorial preferida) y rastreé el pin en cada una de las poses.

El 5 da forma al pin

Algunas herramientas pueden rastrear automáticamente imágenes ráster y producir rutas vectoriales para usted. Sin embargo, saber que quería realizar una animación de transformación de ruta significaba que necesitaba "rutas compatibles"; es decir, cada ruta debe tener el mismo número y tipo de puntos. Como tal, al dibujar el alfiler con una forma simple (compuesta de 8 puntos, cada uno con 2 puntos de control) y alterarlo manualmente para formar cada pose, podría estar seguro de que luego podemos animar entre las formas.

Luego exporté cada cuadro como archivos SVG individuales. Ahora SVG es una gran especificación y VectorDrawable de Android solo admite un subconjunto de la misma. También es útil recordar que deben analizarse y representarse en un dispositivo móvil restringido; por lo tanto, siempre trato de simplificar mis SVG. Para hacer esto, los ejecuté a través de SVGO (usando SVGOMG por Jake Archibald) estableciendo la precisión en 1 decimal.

Brincar

Ahora que tenemos los caminos de cada pose del pin, ¡es hora de hacer que se muevan! Para hacer esto, recurrí al increíble Icon Animator de Roman Nurik. Este es un IDE basado en la web para crear AnimatedVectorDrawables. Dejé caer el primer SVG y luego hice clic en el icono del cronómetro al lado de la capa de pin y agregué una nueva animación pathData. Esto produce un panel de inspección donde podría insertar la ruta del pin desde el siguiente marco en toValue. Repetí esto 4 veces más para hacer nuestra animación (donde el último paso se anima desde la pose final, hasta la inicial).

Para los valores de tiempo, me referí de nuevo al GIF original donde cada cuadro duraba 30 ms, por lo que si había 4 cuadros entre poses, use una duración de 120 ms, etc. Elegí usar solo interpoladores de material estándar, pero en realidad esto podría beneficiarse del ajuste fino .

Vallas

Para los puntos que se mueven podemos realizar una traducción simple. Mirando la composición de origen, cada tercer punto es más grande y rojo; ¿Cómo implementar esto en un buen bucle? Si bien podría implementar esto con solo 3 puntos y animar cada uno individualmente; Decidí incluir 5 puntos donde los puntos más a la derecha se extienden más allá de la ventana gráfica:

Hacer esto nos permite animar a todo el grupo de puntos a la izquierda todos juntos, una vez que el cuarto punto alcanza la ubicación inicial del primer punto, restablecemos instantáneamente la traducción, volviendo a su punto de partida. ¡Ordenado!

Viniendo y yendo

Queremos que los puntos se desvanezcan cuando entren y se desvanezcan cuando salgan, esta es una animación simple del fillAlpha, ¡te dejo a ti para que veas cómo se logra!

Rizar el rizo

Ahora, para convertir esto en una animación de bucle completo, hay algunas cosas a tener en cuenta. La animación de puntos tiene el triple de la duración del salto del pin. Pensé en dividirlos en 2 AVD separados y ponerlos en capas ... ¡pero decidí que repetir el salto 3 veces era más simple!

Presioné el botón mágico de exportación en Icon Animator que me dio la definición AVD, lista para entrar en mi proyecto. Sin embargo, la herramienta todavía está en 'vista previa', así que realicé algunos ajustes para limpiar el resultado, es decir, eliminar cualquier atributo redundante y factorizar los valores repetidos (como las diferentes rutas de pin y algunos colores) en un archivo de recursos para hacer ellos más mantenibles.

Realmente, hacer el bucle AVD completo fue más complicado de lo que había imaginado. Aparentemente se repite el modo repetir en los conjuntos de animaciones (se han archivado errores). Trabajé alrededor de esto escuchando el final de la animación y comenzando de nuevo. Desafortunadamente, las devoluciones de llamada solo se agregaron en API23, pero podría lograr el mismo efecto a través de postDelayed, etc.

Animate

Puede encontrar una idea general del código aquí o consultar la composición completa en Icon Animator y jugar con él.

Esperemos que esta publicación te haya mostrado que AnimatedVectorDrawable es muy poderoso y que puedes crear animaciones ricas con relativa facilidad. También espero que compartir mi flujo de trabajo ayude a desmitificar el proceso y tal vez te inspire a crear el tuyo propio. ¡Deja me saber si lo haces!