tree: 4462be7c81a0a07f1e13898bdc8730b82d20858a [path history] [tgz]
  1. BUILD.gn
  2. LICENSE
  3. lottie_worker.js
  4. lottie_worker.min.js
  5. METADATA
  6. OWNERS
  7. README.chromium
  8. README.md
third_party/lottie/README.md

Lottie Web Worker

Using the lottie player on a worker thread and an offscreen canvas.

Sample usage

1. Setting up a new animation

HTML:

<canvas id="a"></canvas>

Javascript:

let offscreenCanvas = document.getElementById('a').transferControlToOffscreen();
let animationData = JSON_LOTTIE_ANIMATION_DATA;

let worker = new Worker('lottie_worker.min.js');
worker.postMessage({
  canvas: offscreenCanvas,
  animationData: animationData,
  drawSize: {
    width: 200,
    height: 100
  }
  params: {
    loop: true,
    autoplay: true
  }
})

2. Updating the size of the canvas

worker.postMessage({
  drawSize: {
    width: 250,
    height: 150
  }
})

Message field description

data: {
  canvas: 'The offscreen canvas that will display the animation.',
  animationData: 'The json lottie animation data.',
  drawSize: {
    width: 'The width of the rendered frame in pixels',
    height: 'The height of the rendered frame in pixels',
  },
  params: {
    loop: 'Set "true" for a looping animation',
    autoplay: 'Set "true" for the animation to autoplay on load',
  }
},