@lottiefiles/dotlottie-web 0.11.0 → 0.12.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 +29 -27
- package/dist/animation-frame-manager.js +9 -8
- package/dist/constants.d.ts +1 -2
- package/dist/constants.js +6 -5
- package/dist/dotlottie.d.ts +3 -0
- package/dist/dotlottie.js +2310 -18
- package/dist/event-manager.js +4 -2
- package/dist/index.js +3001 -4
- package/dist/renderer-loader.js +2113 -8
- package/dist/utils.js +1 -0
- package/dist/wasm/index.d.ts +1 -1
- package/dist/wasm/index.js +2027 -1
- package/dist/wasm/renderer.js +1 -0
- package/dist/wasm/renderer.wasm +0 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
# @lottiefiles/dotlottie-web
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
|
+
[](https://www.jsdelivr.com/package/npm/@lottiefiles/dotlottie-web)
|
|
7
8
|
|
|
8
9
|
<p align="center">
|
|
9
10
|
<img src="https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png" />
|
|
@@ -56,7 +57,7 @@ After installation, you can import `DotLottie` in your JavaScript or TypeScript
|
|
|
56
57
|
|
|
57
58
|
```html
|
|
58
59
|
<!-- Canvas element where the animation will be rendered -->
|
|
59
|
-
<canvas id="
|
|
60
|
+
<canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>
|
|
60
61
|
```
|
|
61
62
|
|
|
62
63
|
```js
|
|
@@ -65,7 +66,7 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
|
|
|
65
66
|
const dotLottie = new DotLottie({
|
|
66
67
|
autoplay: true,
|
|
67
68
|
loop: true,
|
|
68
|
-
canvas: document.
|
|
69
|
+
canvas: document.querySelector('#dotlottie-canvas'),
|
|
69
70
|
src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
|
|
70
71
|
});
|
|
71
72
|
```
|
|
@@ -87,14 +88,13 @@ const dotLottie = new DotLottie({
|
|
|
87
88
|
<!-- Canvas element where the Lottie animation will be rendered -->
|
|
88
89
|
<canvas id="canvas" width="300" height="300"></canvas>
|
|
89
90
|
<script type="module">
|
|
90
|
-
import { DotLottie } from "https://
|
|
91
|
+
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
|
|
91
92
|
|
|
92
93
|
new DotLottie({
|
|
93
94
|
autoplay: true,
|
|
94
95
|
loop: true,
|
|
95
96
|
canvas: document.getElementById("canvas"),
|
|
96
|
-
src:
|
|
97
|
-
"https://lottie.host/5f7f4690-6311-4279-82e4-38c2eab146ab/niPwIBUnGa.json"
|
|
97
|
+
src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
|
|
98
98
|
});
|
|
99
99
|
</script>
|
|
100
100
|
</body>
|
|
@@ -125,7 +125,7 @@ The `DotLottie` constructor accepts a config object with the following propertie
|
|
|
125
125
|
| `backgroundColor` | string | | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), |
|
|
126
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
127
|
| `renderConfig` | [RenderConfig](#renderconfig) | | `{}` | Configuration for rendering the animation. |
|
|
128
|
-
| `useFrameInterpolation` | boolean | |
|
|
128
|
+
| `useFrameInterpolation` | boolean | | true | 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. |
|
|
129
129
|
|
|
130
130
|
#### RenderConfig
|
|
131
131
|
|
|
@@ -139,25 +139,26 @@ The `renderConfig` object accepts the following properties:
|
|
|
139
139
|
|
|
140
140
|
`DotLottie` instances expose the following properties:
|
|
141
141
|
|
|
142
|
-
| Property | Type
|
|
143
|
-
| ----------------------- |
|
|
144
|
-
| `currentFrame` | number
|
|
145
|
-
| `duration` | number
|
|
146
|
-
| `totalFrames` | number
|
|
147
|
-
| `loop` | boolean
|
|
148
|
-
| `speed` | number
|
|
149
|
-
| `loopCount` | number
|
|
150
|
-
| `direction` | string
|
|
151
|
-
| `mode` | string
|
|
152
|
-
| `isPaused` | boolean
|
|
153
|
-
| `isStopped` | boolean
|
|
154
|
-
| `isPlaying` | boolean
|
|
155
|
-
| `segments` | number
|
|
156
|
-
| `backgroundColor` | string
|
|
157
|
-
| `autoplay` | boolean
|
|
158
|
-
| `isFrozen` | boolean
|
|
159
|
-
| `isLoaded` | boolean
|
|
160
|
-
| `useFrameInterpolation` | boolean
|
|
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, 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. |
|
|
161
|
+
| `renderConfig` | [RenderConfig](#renderconfig) | Configuration for rendering the animation. |
|
|
161
162
|
|
|
162
163
|
### Methods
|
|
163
164
|
|
|
@@ -182,6 +183,7 @@ The `renderConfig` object accepts the following properties:
|
|
|
182
183
|
| `setBackgroundColor(color: string)` | Sets the background color of the canvas. |
|
|
183
184
|
| `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
185
|
| `setUseFrameInterpolation(useFrameInterpolation: boolean)` | Sets whether the animation should update on subframes. |
|
|
186
|
+
| `setRenderConfig(renderConfig: RenderConfig)` | Sets the render configuration. check [RenderConfig](#renderconfig) for more details. |
|
|
185
187
|
|
|
186
188
|
### Static Methods
|
|
187
189
|
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { IS_NODE } from './constants';
|
|
2
|
-
|
|
3
1
|
var __defProp = Object.defineProperty;
|
|
4
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
5
3
|
var __publicField = (obj, key, value) => {
|
|
6
4
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
7
5
|
return value;
|
|
8
6
|
};
|
|
9
|
-
|
|
7
|
+
var IS_NODE = typeof global !== "undefined";
|
|
8
|
+
|
|
9
|
+
// src/animation-frame-manager.ts
|
|
10
|
+
var WebAnimationFrameStrategy = class {
|
|
10
11
|
requestAnimationFrame(callback) {
|
|
11
12
|
return requestAnimationFrame(callback);
|
|
12
13
|
}
|
|
13
14
|
cancelAnimationFrame(id) {
|
|
14
15
|
cancelAnimationFrame(id);
|
|
15
16
|
}
|
|
16
|
-
}
|
|
17
|
-
|
|
17
|
+
};
|
|
18
|
+
var NodeAnimationFrameStrategy = class {
|
|
18
19
|
constructor() {
|
|
19
20
|
__publicField(this, "_lastHandleId", 0);
|
|
20
21
|
__publicField(this, "_lastImmediate", null);
|
|
@@ -34,8 +35,8 @@ class NodeAnimationFrameStrategy {
|
|
|
34
35
|
clearImmediate(this._lastImmediate);
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
|
-
}
|
|
38
|
-
|
|
38
|
+
};
|
|
39
|
+
var AnimationFrameManager = class {
|
|
39
40
|
constructor() {
|
|
40
41
|
__publicField(this, "_strategy");
|
|
41
42
|
this._strategy = IS_NODE ? new NodeAnimationFrameStrategy() : new WebAnimationFrameStrategy();
|
|
@@ -46,6 +47,6 @@ class AnimationFrameManager {
|
|
|
46
47
|
cancelAnimationFrame(id) {
|
|
47
48
|
this._strategy.cancelAnimationFrame(id);
|
|
48
49
|
}
|
|
49
|
-
}
|
|
50
|
+
};
|
|
50
51
|
|
|
51
52
|
export { AnimationFrameManager };
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Copyright 2023 Design Barn Inc.
|
|
3
3
|
*/
|
|
4
|
-
/// <reference lib="webworker" />
|
|
5
4
|
declare const IS_BROWSER: boolean;
|
|
6
|
-
declare const IS_NODE: boolean;
|
|
7
5
|
declare const IS_WEB_WORKER: boolean;
|
|
6
|
+
declare const IS_NODE: boolean;
|
|
8
7
|
declare const MS_TO_SEC_FACTOR = 1000;
|
|
9
8
|
declare const DEFAULT_BG_COLOR = "#00000000";
|
|
10
9
|
|
package/dist/constants.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
// src/constants.ts
|
|
2
|
+
var IS_BROWSER = typeof window !== "undefined" && typeof window.document !== "undefined";
|
|
3
|
+
var IS_WEB_WORKER = typeof self !== "undefined" && typeof Window === "undefined";
|
|
4
|
+
var IS_NODE = typeof global !== "undefined";
|
|
5
|
+
var MS_TO_SEC_FACTOR = 1e3;
|
|
6
|
+
var DEFAULT_BG_COLOR = "#00000000";
|
|
6
7
|
|
|
7
8
|
export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, IS_WEB_WORKER, MS_TO_SEC_FACTOR };
|
package/dist/dotlottie.d.ts
CHANGED
|
@@ -108,7 +108,9 @@ declare class DotLottie {
|
|
|
108
108
|
private _isLoaded;
|
|
109
109
|
private readonly _animationFrameManager;
|
|
110
110
|
private _useFrameInterpolation;
|
|
111
|
+
private _imageData;
|
|
111
112
|
constructor(config: Config);
|
|
113
|
+
get renderConfig(): RenderConfig;
|
|
112
114
|
get canvas(): HTMLCanvasElement | OffscreenCanvas;
|
|
113
115
|
get mode(): Mode;
|
|
114
116
|
/**
|
|
@@ -329,6 +331,7 @@ declare class DotLottie {
|
|
|
329
331
|
*/
|
|
330
332
|
resize(): void;
|
|
331
333
|
setUseFrameInterpolation(useFrameInterpolation: boolean): void;
|
|
334
|
+
setRenderConfig(config: RenderConfig): void;
|
|
332
335
|
}
|
|
333
336
|
|
|
334
337
|
export { type Config, DotLottie, type Mode };
|