Web

Puede renderizar archivos Lottie JSON en la web.

Primero, obtenga la biblioteca javascript del reproductor bodymovin

<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- OR -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>

Entonces reproducir la animación es tan simple como:

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})

Uso

Llame a lottie.loadAnimation() para iniciar una animación. Toma un objeto como parámetro único; con:

1. animationData: un objeto con los datos de animación exportados,
2. path: la ruta relativa al objeto de animación. (animationData y pathson mutuamente excluyentes),
3. loop: true / false / number,
4. autoplay: true / false, comenzará a reproducirse tan pronto como esté listo,
5. name: nombre de la animación para futuras referencias
6. renderer: ‘svg’ / ‘canvas’ / ‘html’ para configurar el renderizador
7. container: el elemento DOM en el que renderizar la animación

Devuelve la instancia de animación que puedes controlar con play, pause, setSpeed, etc.