Name | Date | Size | #Lines | LOC | ||
---|---|---|---|---|---|---|
.. | - | - | ||||
README.md | D | 12-May-2024 | 1.6 KiB | 42 | 32 | |
package.json | D | 12-May-2024 | 379 | 15 | 14 |
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