[VS4Mac] Lottie Player, nuevo addin para previsualizar animaciones Lottie

Introducción

¿Te imaginas tomar una animación creada por un diseñador y poder utilizarla?.

Lottiees una librería de animaciones creada por Airbnb para iOS y Android que se encarga de tomar animaciones de After Effect exportadas en JSON y renderizarla utilizando APIs de animación nativa en cada plataforma.

Lottie

Las animaciones pueden ser extremadamente complejas pero al final, trabajamos con archivos de imagen y JSONs lo que se traduce en un requisito pequeño en tamaño otorgando unas posibilidades altas. Las animaciones se pueden reproducir, pausar, detener, jugar con la velocidad o cambiar la escala.

Lottie Player

Usar animaciones de Lottie y acabar lanzando la App en depuración o usando herramientas externas para ver el resultado no es lo idóneo, ¿verdad?. Lottie Playeres un addin para Visual Studio para macOS que permite previsualizar (e interactuar) con la animación directamente desde el IDE.

¿Cómo instalar?

Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…

Buscamos por “Lottie Player”:

Instalar Lottie Player…

Y pulsamos Install…

¿Qué aporta?

Podremos hacer clic derecho sobre un archivo de animación Lottie (recuerda, formato Json) y acceder a una nueva opción, Preview In Lottie Player…

Lottie Player

Seleccionando la opción, previsualizaremos la animación en bucle además de:

  • Poder pausar y reanudar la animación en cualquier momento.
  • Si pausamos la animación, podremos movernos hacia cualquier frame de la animación.

Veamos el addin en funcionamiento:

Preview in Lottie Player

Lo próximo

La versión actual aporta la funcionalidad básica pero hay una gran cantidad de opciones posibles para futuras versiones:

  • Controlar la velocidad de la animación.
  • Controlar si se reproduce o no en bucle.
  • Poder cambiar el fondo de la animación.
  • Etc.

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!

Más información

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *