You can render Lottie animations using the LottieAnimation class from @napi-rs/canvas.
Loading Animations
- From file: Use
LottieAnimation.loadFromFile(path). - From JSON string: Use
LottieAnimation.loadFromData(jsonString, options) where options can include a resourcePath for external assets.
Animation Properties
duration: Total duration in seconds.fps: Frames per second.frames: Total frame count.width: Animation width.height: Animation height.version: Lottie format version.
Playback Control
seekFrame(frame): Seek to a specific frame.seek(seconds): Seek to a specific time in seconds.
Rendering
To render to a canvas, use animation.render(ctx) or animation.render(ctx, { x, y, width, height }) to render with a custom destination rectangle.
const { createCanvas, LottieAnimation } = require('@napi-rs/canvas')
const animation = LottieAnimation.loadFromFile('animation.json')
const canvas = createCanvas(animation.width, animation.height)
const ctx = canvas.getContext('2d')
// Render at original size
animation.render(ctx)
// Render with custom destination rect
animation.render(ctx, { x: 0, y: 0, width: 800, height: 600 })
