@lottiefiles/dotlottie-web 0.9.2 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -47
- package/dist/animation-frame-manager.js +50 -4
- package/dist/constants.d.ts +4 -1
- package/dist/constants.js +6 -4
- package/dist/dotlottie.d.ts +16 -1
- package/dist/dotlottie.js +708 -5
- package/dist/event-manager.d.ts +1 -1
- package/dist/event-manager.js +40 -4
- package/dist/index.d.ts +3 -49
- package/dist/index.js +4 -6
- package/dist/renderer-loader.d.ts +37 -0
- package/dist/renderer-loader.js +63 -0
- package/dist/utils.js +45 -4
- package/dist/wasm/index.d.ts +23 -0
- package/dist/wasm/index.js +1 -0
- package/dist/wasm/renderer.d.ts +3 -0
- package/dist/wasm/renderer.js +2026 -0
- package/dist/{renderer.wasm → wasm/renderer.wasm} +0 -0
- package/package.json +25 -11
- package/dist/animation-frame-manager.js.map +0 -1
- package/dist/constants.js.map +0 -1
- package/dist/dotlottie.js.map +0 -1
- package/dist/event-manager.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/utils.js.map +0 -1
package/README.md
CHANGED
|
@@ -113,18 +113,19 @@ const dotLottie = new DotLottie({
|
|
|
113
113
|
|
|
114
114
|
The `DotLottie` constructor accepts a config object with the following properties:
|
|
115
115
|
|
|
116
|
-
| Property name
|
|
117
|
-
|
|
|
118
|
-
| `autoplay`
|
|
119
|
-
| `loop`
|
|
120
|
-
| `canvas`
|
|
121
|
-
| `src`
|
|
122
|
-
| `speed`
|
|
123
|
-
| `data`
|
|
124
|
-
| `mode`
|
|
125
|
-
| `backgroundColor`
|
|
126
|
-
| `segments`
|
|
127
|
-
| `renderConfig`
|
|
116
|
+
| Property name | Type | Required | Default | Description |
|
|
117
|
+
| ----------------------- | ----------------------------- | :------: | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
118
|
+
| `autoplay` | boolean | | false | Auto-starts the animation on load. |
|
|
119
|
+
| `loop` | boolean | | false | Determines if the animation should loop. |
|
|
120
|
+
| `canvas` | HTMLCanvasElement | ✔️ | undefined | Canvas element for animation rendering. |
|
|
121
|
+
| `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). |
|
|
122
|
+
| `speed` | number | | 1 | Animation playback speed. 1 is regular speed. |
|
|
123
|
+
| `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
|
|
124
|
+
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse". |
|
|
125
|
+
| `backgroundColor` | string | | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), |
|
|
126
|
+
| `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
|
|
127
|
+
| `renderConfig` | [RenderConfig](#renderconfig) | | `{}` | Configuration for rendering the animation. |
|
|
128
|
+
| `useFrameInterpolation` | boolean | | false | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. |
|
|
128
129
|
|
|
129
130
|
#### RenderConfig
|
|
130
131
|
|
|
@@ -138,46 +139,49 @@ The `renderConfig` object accepts the following properties:
|
|
|
138
139
|
|
|
139
140
|
`DotLottie` instances expose the following properties:
|
|
140
141
|
|
|
141
|
-
| Property
|
|
142
|
-
|
|
|
143
|
-
| `currentFrame`
|
|
144
|
-
| `duration`
|
|
145
|
-
| `totalFrames`
|
|
146
|
-
| `loop`
|
|
147
|
-
| `speed`
|
|
148
|
-
| `loopCount`
|
|
149
|
-
| `direction`
|
|
150
|
-
| `mode`
|
|
151
|
-
| `isPaused`
|
|
152
|
-
| `isStopped`
|
|
153
|
-
| `isPlaying`
|
|
154
|
-
| `segments`
|
|
155
|
-
| `backgroundColor`
|
|
156
|
-
| `autoplay`
|
|
157
|
-
| `isFrozen`
|
|
142
|
+
| Property | Type | Description |
|
|
143
|
+
| ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
144
|
+
| `currentFrame` | number | Represents the animation's currently displayed frame number. |
|
|
145
|
+
| `duration` | number | Specifies the animation's total playback time in milliseconds. |
|
|
146
|
+
| `totalFrames` | number | Denotes the total count of individual frames within the animation. |
|
|
147
|
+
| `loop` | boolean | Indicates if the animation is set to play in a continuous loop. |
|
|
148
|
+
| `speed` | number | Represents the playback speed factor; e.g., 2 would mean double speed. |
|
|
149
|
+
| `loopCount` | number | Tracks how many times the animation has completed its loop. |
|
|
150
|
+
| `direction` | string | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse. |
|
|
151
|
+
| `mode` | string | Reflects the current playback mode. |
|
|
152
|
+
| `isPaused` | boolean | Reflects whether the animation is paused or not. |
|
|
153
|
+
| `isStopped` | boolean | Reflects whether the animation is stopped or not. |
|
|
154
|
+
| `isPlaying` | boolean | Reflects whether the animation is playing or not. |
|
|
155
|
+
| `segments` | number | Reflects the frames range of the animations. where segments\[0] is the start frame and segments\[1] is the end frame. |
|
|
156
|
+
| `backgroundColor` | string | Gets the background color of the canvas. |
|
|
157
|
+
| `autoplay` | boolean | Indicates if the animation is set to auto-play. |
|
|
158
|
+
| `isFrozen` | boolean | Reflects whether the animation loop is stopped or not. |
|
|
159
|
+
| `isLoaded` | boolean | Reflects whether the animation is loaded or not. |
|
|
160
|
+
| `useFrameInterpolation` | boolean | Reflects whether the animation should update on subframes. |
|
|
158
161
|
|
|
159
162
|
### Methods
|
|
160
163
|
|
|
161
164
|
`DotLottie` instances expose the following methods that can be used to control the animation:
|
|
162
165
|
|
|
163
|
-
| Method
|
|
164
|
-
|
|
|
165
|
-
| `play()`
|
|
166
|
-
| `pause()`
|
|
167
|
-
| `stop()`
|
|
168
|
-
| `setSpeed(speed: number)`
|
|
169
|
-
| `setLoop(loop: boolean)`
|
|
170
|
-
| `setFrame(frame: number)`
|
|
171
|
-
| `addEventListener(event: string, listener: Function)`
|
|
172
|
-
| `removeEventListener(event: string, listener?: Function)`
|
|
173
|
-
| `destroy()`
|
|
174
|
-
| `load(config: Config)`
|
|
175
|
-
| `setMode(mode: string)`
|
|
176
|
-
| `setSegments(startFrame: number, endFrame: number)`
|
|
177
|
-
| `freeze()`
|
|
178
|
-
| `unfreeze()`
|
|
179
|
-
| `setBackgroundColor(color: string)`
|
|
180
|
-
| `resize()`
|
|
166
|
+
| Method | Description |
|
|
167
|
+
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
168
|
+
| `play()` | Begins playback from the current animation position. |
|
|
169
|
+
| `pause()` | Pauses the animation without resetting its position. |
|
|
170
|
+
| `stop()` | Halts playback and returns the animation to its initial frame. |
|
|
171
|
+
| `setSpeed(speed: number)` | Sets the playback speed with the given multiplier. |
|
|
172
|
+
| `setLoop(loop: boolean)` | Configures whether the animation should loop continuously. |
|
|
173
|
+
| `setFrame(frame: number)` | Directly navigates the animation to a specified frame. |
|
|
174
|
+
| `addEventListener(event: string, listener: Function)` | Registers a function to respond to a specific animation event. |
|
|
175
|
+
| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event. |
|
|
176
|
+
| `destroy()` | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
|
|
177
|
+
| `load(config: Config)` | Loads a new configuration or a new animation. |
|
|
178
|
+
| `setMode(mode: string)` | Sets the animation play mode. |
|
|
179
|
+
| `setSegments(startFrame: number, endFrame: number)` | Sets the start and end frame of the animation. |
|
|
180
|
+
| `freeze()` | Freezes the animation by stopping the animation loop. |
|
|
181
|
+
| `unfreeze()` | Unfreezes the animation by resuming the animation loop. |
|
|
182
|
+
| `setBackgroundColor(color: string)` | Sets the background color of the canvas. |
|
|
183
|
+
| `resize()` | This method adjusts the canvas size to match its bounding box dimensions, considering the device's pixel ratio. This prevents the canvas from appearing blurry on high-resolution screens. Call this method when the window or the canvas element is resized. |
|
|
184
|
+
| `setUseFrameInterpolation(useFrameInterpolation: boolean)` | Sets whether the animation should update on subframes. |
|
|
181
185
|
|
|
182
186
|
### Static Methods
|
|
183
187
|
|
|
@@ -1,5 +1,51 @@
|
|
|
1
|
-
|
|
1
|
+
import { IS_NODE } from './constants';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
5
|
+
var __publicField = (obj, key, value) => {
|
|
6
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
7
|
+
return value;
|
|
8
|
+
};
|
|
9
|
+
class WebAnimationFrameStrategy {
|
|
10
|
+
requestAnimationFrame(callback) {
|
|
11
|
+
return requestAnimationFrame(callback);
|
|
12
|
+
}
|
|
13
|
+
cancelAnimationFrame(id) {
|
|
14
|
+
cancelAnimationFrame(id);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
class NodeAnimationFrameStrategy {
|
|
18
|
+
constructor() {
|
|
19
|
+
__publicField(this, "_lastHandleId", 0);
|
|
20
|
+
__publicField(this, "_lastImmediate", null);
|
|
21
|
+
}
|
|
22
|
+
requestAnimationFrame(callback) {
|
|
23
|
+
if (this._lastHandleId >= Number.MAX_SAFE_INTEGER) {
|
|
24
|
+
this._lastHandleId = 0;
|
|
25
|
+
}
|
|
26
|
+
this._lastHandleId += 1;
|
|
27
|
+
this._lastImmediate = setImmediate(() => {
|
|
28
|
+
callback(Date.now());
|
|
29
|
+
});
|
|
30
|
+
return this._lastHandleId;
|
|
31
|
+
}
|
|
32
|
+
cancelAnimationFrame(_id) {
|
|
33
|
+
if (this._lastImmediate) {
|
|
34
|
+
clearImmediate(this._lastImmediate);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
class AnimationFrameManager {
|
|
39
|
+
constructor() {
|
|
40
|
+
__publicField(this, "_strategy");
|
|
41
|
+
this._strategy = IS_NODE ? new NodeAnimationFrameStrategy() : new WebAnimationFrameStrategy();
|
|
42
|
+
}
|
|
43
|
+
requestAnimationFrame(callback) {
|
|
44
|
+
return this._strategy.requestAnimationFrame(callback);
|
|
45
|
+
}
|
|
46
|
+
cancelAnimationFrame(id) {
|
|
47
|
+
this._strategy.cancelAnimationFrame(id);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export { AnimationFrameManager };
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Copyright 2023 Design Barn Inc.
|
|
3
3
|
*/
|
|
4
|
+
/// <reference lib="webworker" />
|
|
4
5
|
declare const IS_BROWSER: boolean;
|
|
6
|
+
declare const IS_NODE: boolean;
|
|
7
|
+
declare const IS_WEB_WORKER: boolean;
|
|
5
8
|
declare const MS_TO_SEC_FACTOR = 1000;
|
|
6
9
|
declare const DEFAULT_BG_COLOR = "#00000000";
|
|
7
10
|
|
|
8
|
-
export { DEFAULT_BG_COLOR, IS_BROWSER, MS_TO_SEC_FACTOR };
|
|
11
|
+
export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, IS_WEB_WORKER, MS_TO_SEC_FACTOR };
|
package/dist/constants.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
const IS_BROWSER = typeof window !== "undefined";
|
|
2
|
+
const IS_NODE = typeof process !== "undefined" && process.release.name === "node";
|
|
3
|
+
const IS_WEB_WORKER = typeof self !== "undefined" && typeof self.postMessage === "function";
|
|
4
|
+
const MS_TO_SEC_FACTOR = 1e3;
|
|
5
|
+
const DEFAULT_BG_COLOR = "#00000000";
|
|
2
6
|
|
|
3
|
-
export {
|
|
4
|
-
//# sourceMappingURL=out.js.map
|
|
5
|
-
//# sourceMappingURL=constants.js.map
|
|
7
|
+
export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, IS_WEB_WORKER, MS_TO_SEC_FACTOR };
|
package/dist/dotlottie.d.ts
CHANGED
|
@@ -73,6 +73,14 @@ interface Config {
|
|
|
73
73
|
* If the data is provided, the src will be ignored.
|
|
74
74
|
*/
|
|
75
75
|
src?: string;
|
|
76
|
+
/**
|
|
77
|
+
*
|
|
78
|
+
* If true, it will update on every requestAnimationFrame with intermediate values.
|
|
79
|
+
* If false, it will respect the original AE fps.
|
|
80
|
+
*
|
|
81
|
+
* Default is true.
|
|
82
|
+
*/
|
|
83
|
+
useFrameInterpolation?: boolean;
|
|
76
84
|
}
|
|
77
85
|
declare class DotLottie {
|
|
78
86
|
private readonly _canvas;
|
|
@@ -97,8 +105,12 @@ declare class DotLottie {
|
|
|
97
105
|
private _backgroundColor;
|
|
98
106
|
private _renderConfig;
|
|
99
107
|
private _isFrozen;
|
|
108
|
+
private _isLoaded;
|
|
100
109
|
private readonly _animationFrameManager;
|
|
110
|
+
private _useFrameInterpolation;
|
|
101
111
|
constructor(config: Config);
|
|
112
|
+
get canvas(): HTMLCanvasElement | OffscreenCanvas;
|
|
113
|
+
get mode(): Mode;
|
|
102
114
|
/**
|
|
103
115
|
* Gets the autoplay status of the animation.
|
|
104
116
|
*
|
|
@@ -162,7 +174,9 @@ declare class DotLottie {
|
|
|
162
174
|
get isPlaying(): boolean;
|
|
163
175
|
get isPaused(): boolean;
|
|
164
176
|
get isStopped(): boolean;
|
|
177
|
+
get isLoaded(): boolean;
|
|
165
178
|
get isFrozen(): boolean;
|
|
179
|
+
get useFrameInterpolation(): boolean;
|
|
166
180
|
/**
|
|
167
181
|
* Loads and initializes the animation from a given URL.
|
|
168
182
|
*
|
|
@@ -314,6 +328,7 @@ declare class DotLottie {
|
|
|
314
328
|
*
|
|
315
329
|
*/
|
|
316
330
|
resize(): void;
|
|
331
|
+
setUseFrameInterpolation(useFrameInterpolation: boolean): void;
|
|
317
332
|
}
|
|
318
333
|
|
|
319
|
-
export { Config, DotLottie, Mode };
|
|
334
|
+
export { type Config, DotLottie, type Mode };
|