tree: 1d2896dc1d348da76d785a7727d689adb4ac5ad4 [path history] [tgz]
  1. BUILD.gn
  2. LICENSE
  3. METADATA
  4. OWNERS
  5. README.chromium
  6. README.md
  7. lottie_worker.js
  8. lottie_worker.min.js
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',
  }
},

Events fired back to the parent thread

The web worker running the lottie player will send the following events back to its parent thread:

  1. ‘initialized’
{
    name: 'initialized',
    success: true/false // True if the animation was successfully initialized.
}
  1. ‘playing’
{
    name: 'playing'
}
  1. ‘resized’
{
    name: 'resized',
    size: {
        height: HEIGHT, // Current height of canvas in pixels.
        width: WIDTH    // Current width of canvas in pixels.
    }
}