• Home
Name Date Size #Lines LOC

..--

README.mdD12-May-20241.6 KiB4232

package.jsonD12-May-2024379 1514

README.md

1A WASM version of Skottie (Lottie with Skia).
2
3# Getting Started
4
5To use the library, run `npm install skottiekit-wasm` and then simply include it:
6
7    <script src="/node_modules/skottiekit-wasm/bin/skottiekit.js"></script>
8    const loadKit = SkottieKitInit({
9        locateFile: (file) => '/node_modules/skottiekit-wasm/bin/'+file,
10    });
11    // Load the animation Lottie JSON file.
12    const loadLottie = fetch('/path/to/lottie.json').then((resp) => resp.text());
13
14    Promise.all([loadKit, loadLottie]).then((values) => {
15        const [SkottieKit, lottieJSON] = values;
16        const animation = SkottieKit.MakeManagedAnimation(lottieJSON);
17        const duration = animation.duration() * 1000;
18        // Assumes there's a <canvas id="my_canvas"> somewhere
19        const surface = SkottieKit.MakeCanvasSurface("my_canvas");
20
21        const firstFrame = Date.now();
22        const clearColor = SkottieKit.WHITE;
23
24        function drawFrame(canvas) {
25            // seek takes a float from 0.0 to 1.0
26            const seek = ((Date.now() - firstFrame) / duration) % 1.0;
27            animation.seek(seek);
28
29            canvas.clear(clearColor);
30            animation.render(canvas, bounds);
31            surface.requestAnimationFrame(drawFrame);
32        }
33        surface.requestAnimationFrame(drawFrame);
34    })
35
36As with all npm packages, there's a freely available CDN via unpkg.com:
37
38    <script src="https://unpkg.com/skottiekit-wasm@0.1.0/bin/skottiekit.js"></script>
39    const loadKit SkottieKitInit({
40         locateFile: (file) => 'https://unpkg.com/skottiekit-wasm@0.1.0/bin/'+file,
41    })
42