From 12281c56fbff6a2fc6c6d34287c16f7c647b3370 Mon Sep 17 00:00:00 2001 From: Kevin Lubick Date: Tue, 21 Jul 2020 10:22:49 -0400 Subject: [PATCH] [skottiekit] Initial npm files As per convention, skottiekit/skottiekit is the folder that will be published to npm. It has a bin directory that has the full skottiekit build. Change-Id: I95cbb80158bc8e6dbe3b0d8ae4ffcadd59a7bf9b Reviewed-on: https://skia-review.googlesource.com/c/skia/+/303925 Reviewed-by: Florin Malita --- experimental/skottiekit/.gitignore | 1 + experimental/skottiekit/CHANGELOG.md | 4 +- experimental/skottiekit/Makefile | 9 ++++ experimental/skottiekit/examples/index.html | 2 - experimental/skottiekit/skottiekit/README.md | 41 +++++++++++++++++++ .../skottiekit/skottiekit/package.json | 14 +++++++ 6 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 experimental/skottiekit/.gitignore create mode 100644 experimental/skottiekit/skottiekit/README.md create mode 100644 experimental/skottiekit/skottiekit/package.json diff --git a/experimental/skottiekit/.gitignore b/experimental/skottiekit/.gitignore new file mode 100644 index 0000000000..e660fd93d3 --- /dev/null +++ b/experimental/skottiekit/.gitignore @@ -0,0 +1 @@ +bin/ diff --git a/experimental/skottiekit/CHANGELOG.md b/experimental/skottiekit/CHANGELOG.md index 3687188fd9..1c32712695 100644 --- a/experimental/skottiekit/CHANGELOG.md +++ b/experimental/skottiekit/CHANGELOG.md @@ -6,4 +6,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -Beginning of Changelog history +## [0.1.0] 2020-07-21 + +Beginning of changelog. diff --git a/experimental/skottiekit/Makefile b/experimental/skottiekit/Makefile index 6e79b11e55..cf98418c7a 100644 --- a/experimental/skottiekit/Makefile +++ b/experimental/skottiekit/Makefile @@ -30,10 +30,19 @@ release_full: clean_examples cp ../../out/skottiekit/skottiekit.js ./examples/bin cp ../../out/skottiekit/skottiekit.wasm ./examples/bin +npm: clean_npm + ./compile.sh full-build + cp ../../out/skottiekit/skottiekit.js ./skottiekit/bin + cp ../../out/skottiekit/skottiekit.wasm ./skottiekit/bin + clean_examples: rm -f ./examples/bin/* mkdir -p ./examples/bin +clean_npm: + rm -f ./skottiekit/bin/* + mkdir -p ./skottiekit/bin + serve: echo "Go check out http://localhost:8001/" cd examples && python ../serve.py diff --git a/experimental/skottiekit/examples/index.html b/experimental/skottiekit/examples/index.html index 9c4e240c61..ad0223ba12 100644 --- a/experimental/skottiekit/examples/index.html +++ b/experimental/skottiekit/examples/index.html @@ -34,8 +34,6 @@ return resp.text(); }); - - function SkottieDemo(values, canvasID, width=400, height=400) { const [SkottieKit, legoJSON] = values; const animation = SkottieKit.MakeManagedAnimation(legoJSON); diff --git a/experimental/skottiekit/skottiekit/README.md b/experimental/skottiekit/skottiekit/README.md new file mode 100644 index 0000000000..4e95cf2a1f --- /dev/null +++ b/experimental/skottiekit/skottiekit/README.md @@ -0,0 +1,41 @@ +A WASM version of Skottie (Lottie with Skia). + +# Getting Started + +To use the library, run `npm install skottiekit-wasm` and then simply include it: + + + const loadKit = SkottieKitInit({ + locateFile: (file) => '/node_modules/skottiekit-wasm/bin/'+file, + }); + // Load the animation Lottie JSON file. + const loadLottie = fetch('/path/to/lottie.json').then((resp) => resp.text()); + + Promise.all([loadKit, loadLottie]).then((values) => { + const [SkottieKit, lottieJSON] = values; + const animation = SkottieKit.MakeManagedAnimation(lottieJSON); + const duration = animation.duration() * 1000; + // Assumes there's a somewhere + const surface = SkottieKit.MakeCanvasSurface("my_canvas"); + + const firstFrame = Date.now(); + const clearColor = SkottieKit.WHITE; + + function drawFrame(canvas) { + // seek takes a float from 0.0 to 1.0 + const seek = ((Date.now() - firstFrame) / duration) % 1.0; + animation.seek(seek); + + canvas.clear(clearColor); + animation.render(canvas, bounds); + surface.requestAnimationFrame(drawFrame); + } + surface.requestAnimationFrame(drawFrame); + }) + +As with all npm packages, there's a freely available CDN via unpkg.com: + + + const loadKit SkottieKitInit({ + locateFile: (file) => 'https://unpkg.com/skottiekit-wasm@0.1.0/bin/'+file, + }) diff --git a/experimental/skottiekit/skottiekit/package.json b/experimental/skottiekit/skottiekit/package.json new file mode 100644 index 0000000000..9562c647a7 --- /dev/null +++ b/experimental/skottiekit/skottiekit/package.json @@ -0,0 +1,14 @@ +{ + "name": "skottiekit-wasm", + "version": "0.1.0", + "description": "A WASM version of Skottie", + "homepage": "https://skia.org/user/modules/skottie", + "bugs": { + "url": "https://bugs.chromium.org/p/skia/issues/entry" + }, + "permsRepo": "skia-dev/.github", + "publishConfig": { + "registry":"https://wombat-dressing-room.appspot.com" + }, + "license": "BSD-3-Clause" +}