<canvas id="a"></canvas>
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
}
})
worker.postMessage({
drawSize: {
width: 250,
height: 150
}
})
worker.postMessage({
control: {
play: false
}
})
worker.postMessage({
control: {
stop: true
}
})
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',
},
control: {
play: 'Set "true" to play a paused animation or "false" to pause a playing animation',
stop: 'Set "true" to stop a playing animation. This will clear the canvas',
}
},
The web worker running the lottie player will send the following events back to its parent thread:
‘initialized’
{
name: 'initialized',
success: true/false // True if the animation was successfully initialized.
}
javascript
{
name: 'playing'
}
‘paused’
{
name: 'paused'
}
javascript
{
name: 'stopped'
}
‘resized’
{
name: 'resized',
size: {
height: HEIGHT, // Current height of canvas in pixels.
width: WIDTH // Current width of canvas in pixels.
}
}