-
-
Notifications
You must be signed in to change notification settings - Fork 92
feat: support Lottie API #1177
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: support Lottie API #1177
Conversation
Add support for loading and rendering Lottie animations using Skia's Skottie module. Features: - Load animations from JSON data or file path - Support for embedded base64 images via DataURIResourceProviderProxy - Support for embedded font glyphs via kPreferEmbeddedFonts flag - Animation playback control: seek by frame or time - Render to Canvas2D context with configurable destination rect - Access animation metadata: duration, fps, frames, dimensions, version Example usage with @napi-rs/webcodecs to encode Lottie to MP4 video. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR adds comprehensive Lottie animation support to @napi-rs/canvas using Skia's Skottie module. The implementation enables loading, rendering, and controlling Lottie animations from JSON files or data.
Key Changes:
- Added Skottie module integration with support for embedded base64 images and font glyphs
- Implemented animation loading from files and JSON data with configurable resource paths
- Exposed animation properties (duration, fps, frames, dimensions) and playback controls
- Included video encoding example using
@napi-rs/webcodecs
Reviewed changes
Copilot reviewed 12 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/sk.rs |
Added FFI bindings for Skottie C API and Rust wrapper with SkottieAnimation struct |
src/lottie.rs |
Implemented NAPI bindings for JavaScript API with load methods and render function |
src/lib.rs |
Exported new lottie module |
skia-c/skia_c.hpp |
Added C API function declarations for Skottie operations |
skia-c/skia_c.cpp |
Implemented C wrapper functions with base64 image and embedded font support |
scripts/build-skia.js |
Enabled Skottie module in Skia build configuration |
scripts/release-skia-binary.mjs |
Added Skottie-related libraries to release script |
package.json |
Added @napi-rs/webcodecs and @oxc-node/cli dev dependencies |
yarn.lock |
Updated lockfile with new dependency entries |
index.d.ts |
Added TypeScript definitions for LottieAnimation class and related interfaces |
index.js |
Exported LottieAnimation from main module |
README.md |
Added comprehensive documentation with usage examples |
example/lottie-to-video.ts |
Provided complete example of encoding Lottie to MP4 video |
example/flat-lottie.json |
Added sample Lottie animation file with embedded assets |
.gitignore |
Added output files from example to ignore list |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { readFileSync, writeFileSync } from 'node:fs' | ||
| import { join } from 'node:path' | ||
|
|
||
|
|
Copilot
AI
Dec 19, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is an extra empty line after the imports. Remove this blank line for consistency with the codebase formatting.
|
|
||
| /// Load animation from file path | ||
| #[napi(factory, js_name = "loadFromFile")] | ||
| pub fn load_from_file(path: String, _options: Option<LottieAnimationOptions>) -> Result<Self> { |
Copilot
AI
Dec 19, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The _options parameter is unused in this function. The loadFromFile method should either use the options parameter (for consistency with loadFromData) or remove it from the function signature. If the parameter is kept, it should be passed to the underlying implementation or documented why it's not used.
| pub fn load_from_file(path: String, _options: Option<LottieAnimationOptions>) -> Result<Self> { | |
| pub fn load_from_file(path: String, options: Option<LottieAnimationOptions>) -> Result<Self> { | |
| // Derive the resource path from options for API consistency with `loadFromData`. | |
| // Currently, `SkottieAnimation::from_file` does not accept a resource path, so this | |
| // is not passed through, but the parameter is retained for future compatibility. | |
| let _resource_path = options | |
| .as_ref() | |
| .and_then(|o| o.resource_path.as_deref()); |
Summary
Add support for loading and rendering Lottie animations using Skia's Skottie module.
Features
loadFromData) or file path (loadFromFile)data:image/...;base64,...assetskPreferEmbeddedFontsseekFrame) or time (seek)API
Example: Encode Lottie to MP4
See
example/lottie-to-video.tsfor a complete example using@napi-rs/webcodecsto encode a Lottie animation to MP4 video.Test plan
🤖 Generated with Claude Code