import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';const canvas = scrawl.library.canvas.mycanvas;Import the Lottie loader module
import lottieLoader from './modules/lottie-loader.js';The module returns a Promise, in case it needs to fetch and install the Bodymovin library, which is used to play and control the Lottie animation.
lottieLoader({
name: 'my-first-lottie-animation',
src: 'img/33-video-cam.json',
scrawl,
})
/** @ts-expect-error */
.then(lottiePacket => {
console.log(lottiePacket);
const lottieAsset = lottiePacket.asset;
scrawl.makePicture({
name: 'first-piccy',
start: ['30%', '30%'],
handle: ['center', 'center'],
dimensions: [200, 100],
copyStart: ['30%', '30%'],
copyDimensions: ['40%', '40%'],
lineWidth: 8,
lineJoin: 'round',
strokeStyle: 'orange',
method: 'drawThenFill',
asset: lottieAsset.name,
delta: {
roll: 0.5,
},
}).clone({
name: 'second-piccy',
dimensions: [220, 80],
start: ['30%', '70%'],
strokeStyle: 'green',
}).clone({
name: 'third-piccy',
dimensions: [150, 150],
copyStart: ['40%', '30%'],
copyDimensions: ['20%', '40%'],
start: ['70%', '70%'],
strokeStyle: 'red',
}).clone({
name: 'fourth-piccy',
dimensions: [200, 100],
copyStart: ['40%', '33%'],
copyDimensions: ['20%', '20%'],
start: ['70%', '30%'],
strokeStyle: 'blue',
}).clone({
name: 'fifth-piccy',
copyStart: ['30%', '30%'],
copyDimensions: ['40%', '40%'],
start: ['50%', '50%'],
strokeStyle: 'gray',
scale: 0.5,
delta: {
roll: -0.5,
},
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');Create the Display cycle animation
scrawl.makeRender({
name: 'my-demo',
target: canvas,
commence: () => lottieAsset.set({ trigger: true }),
afterShow: report,
});
})
.catch(err => console.log(err));console.log(scrawl.library);