@babylonjs/lottie-player 8.24.1
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/animationConfiguration.d.ts +80 -0
- package/animationConfiguration.d.ts.map +1 -0
- package/animationConfiguration.js +16 -0
- package/animationConfiguration.js.map +1 -0
- package/index.d.ts +4 -0
- package/index.d.ts.map +1 -0
- package/index.js +3 -0
- package/index.js.map +1 -0
- package/license.md +21 -0
- package/localPlayer.d.ts +38 -0
- package/localPlayer.d.ts.map +1 -0
- package/localPlayer.js +100 -0
- package/localPlayer.js.map +1 -0
- package/maths/bezier.d.ts +45 -0
- package/maths/bezier.d.ts.map +1 -0
- package/maths/bezier.js +53 -0
- package/maths/bezier.js.map +1 -0
- package/maths/boundingBox.d.ts +39 -0
- package/maths/boundingBox.d.ts.map +1 -0
- package/maths/boundingBox.js +204 -0
- package/maths/boundingBox.js.map +1 -0
- package/maths/matrix.d.ts +92 -0
- package/maths/matrix.d.ts.map +1 -0
- package/maths/matrix.js +174 -0
- package/maths/matrix.js.map +1 -0
- package/messageTypes.d.ts +88 -0
- package/messageTypes.d.ts.map +1 -0
- package/messageTypes.js +2 -0
- package/messageTypes.js.map +1 -0
- package/nodes/controlNode.d.ts +32 -0
- package/nodes/controlNode.d.ts.map +1 -0
- package/nodes/controlNode.js +38 -0
- package/nodes/controlNode.js.map +1 -0
- package/nodes/node.d.ts +121 -0
- package/nodes/node.d.ts.map +1 -0
- package/nodes/node.js +357 -0
- package/nodes/node.js.map +1 -0
- package/nodes/spriteNode.d.ts +32 -0
- package/nodes/spriteNode.d.ts.map +1 -0
- package/nodes/spriteNode.js +51 -0
- package/nodes/spriteNode.js.map +1 -0
- package/package.json +48 -0
- package/parsing/parsedTypes.d.ts +141 -0
- package/parsing/parsedTypes.d.ts.map +1 -0
- package/parsing/parsedTypes.js +2 -0
- package/parsing/parsedTypes.js.map +1 -0
- package/parsing/parser.d.ts +59 -0
- package/parsing/parser.d.ts.map +1 -0
- package/parsing/parser.js +500 -0
- package/parsing/parser.js.map +1 -0
- package/parsing/rawTypes.d.ts +238 -0
- package/parsing/rawTypes.d.ts.map +1 -0
- package/parsing/rawTypes.js +4 -0
- package/parsing/rawTypes.js.map +1 -0
- package/parsing/spritePacker.d.ts +122 -0
- package/parsing/spritePacker.d.ts.map +1 -0
- package/parsing/spritePacker.js +409 -0
- package/parsing/spritePacker.js.map +1 -0
- package/player.d.ts +42 -0
- package/player.d.ts.map +1 -0
- package/player.js +146 -0
- package/player.js.map +1 -0
- package/readme.md +44 -0
- package/rendering/animationController.d.ts +93 -0
- package/rendering/animationController.d.ts.map +1 -0
- package/rendering/animationController.js +246 -0
- package/rendering/animationController.js.map +1 -0
- package/rendering/renderingManager.d.ts +46 -0
- package/rendering/renderingManager.d.ts.map +1 -0
- package/rendering/renderingManager.js +61 -0
- package/rendering/renderingManager.js.map +1 -0
- package/worker.d.ts +2 -0
- package/worker.d.ts.map +1 -0
- package/worker.js +62 -0
- package/worker.js.map +1 -0
|
@@ -0,0 +1,409 @@
|
|
|
1
|
+
import "@babylonjs/core/Engines/Extensions/engine.dynamicTexture.js";
|
|
2
|
+
import { ThinTexture } from "@babylonjs/core/Materials/Textures/thinTexture.js";
|
|
3
|
+
import { GetShapesBoundingBox, GetTextBoundingBox } from "../maths/boundingBox.js";
|
|
4
|
+
/**
|
|
5
|
+
* SpritePacker is a class that handles the packing of sprites into a texture atlas.
|
|
6
|
+
*/
|
|
7
|
+
export class SpritePacker {
|
|
8
|
+
/**
|
|
9
|
+
* Gets the texture atlas that contains all the sprites packed by this SpritePacker.
|
|
10
|
+
* @returns The texture atlas containing the sprites.
|
|
11
|
+
*/
|
|
12
|
+
get texture() {
|
|
13
|
+
return this._spritesTexture;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Sets the fonts that will be used to render text in the sprite atlas.
|
|
17
|
+
* @param rawFonts A map of font names to RawFont objects.
|
|
18
|
+
*/
|
|
19
|
+
set rawFonts(rawFonts) {
|
|
20
|
+
this._rawFonts = rawFonts;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Creates a new instance of SpritePacker.
|
|
24
|
+
* @param engine Engine that will render the sprites.
|
|
25
|
+
* @param isHtmlCanvas Whether we should render the atlas in an HTMLCanvasElement or an OffscreenCanvas.
|
|
26
|
+
* @param scaleFactor The scale factor to apply to the sprites.
|
|
27
|
+
* @param variables Map of variables to replace in the animation file.
|
|
28
|
+
* @param configuration Configuration options for the sprite packer.
|
|
29
|
+
*/
|
|
30
|
+
constructor(engine, isHtmlCanvas, scaleFactor, variables, configuration) {
|
|
31
|
+
this._engine = engine;
|
|
32
|
+
this._scaleFactor = scaleFactor;
|
|
33
|
+
this._variables = variables;
|
|
34
|
+
this._configuration = configuration;
|
|
35
|
+
this._isDirty = false;
|
|
36
|
+
this._currentX = 0;
|
|
37
|
+
this._currentY = 0;
|
|
38
|
+
this._maxRowHeight = 0;
|
|
39
|
+
if (isHtmlCanvas) {
|
|
40
|
+
this._spritesCanvas = document.createElement("canvas");
|
|
41
|
+
this._spritesCanvas.width = this._configuration.spriteAtlasWidth;
|
|
42
|
+
this._spritesCanvas.height = this._configuration.spriteAtlasHeight;
|
|
43
|
+
this._spritesCanvasContext = this._spritesCanvas.getContext("2d");
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
this._spritesCanvas = new OffscreenCanvas(this._configuration.spriteAtlasWidth, this._configuration.spriteAtlasHeight);
|
|
47
|
+
this._spritesCanvasContext = this._spritesCanvas.getContext("2d");
|
|
48
|
+
}
|
|
49
|
+
this._spritesInternalTexture = this._engine.createDynamicTexture(this._configuration.spriteAtlasWidth, this._configuration.spriteAtlasHeight, false, 2); // Linear filtering
|
|
50
|
+
this._engine.updateDynamicTexture(this._spritesInternalTexture, this._spritesCanvas, false);
|
|
51
|
+
this._spritesTexture = new ThinTexture(this._spritesInternalTexture);
|
|
52
|
+
this._spritesTexture.wrapU = 0; // Disable wrapping
|
|
53
|
+
this._spritesTexture.wrapV = 0; // Disable wrapping
|
|
54
|
+
this._spriteAtlasInfo = {
|
|
55
|
+
uOffset: 0,
|
|
56
|
+
vOffset: 0,
|
|
57
|
+
cellWidth: 0,
|
|
58
|
+
cellHeight: 0,
|
|
59
|
+
widthPx: 0,
|
|
60
|
+
heightPx: 0,
|
|
61
|
+
centerX: 0,
|
|
62
|
+
centerY: 0,
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Adds a vector shape that comes from lottie data to the sprite atlas.
|
|
67
|
+
* @param rawElements The raw element that contains the paths and fills to add to the atlas.
|
|
68
|
+
* @param scalingFactor The scaling factor to apply to the shape.
|
|
69
|
+
* @returns The information on how to find the sprite in the atlas.
|
|
70
|
+
*/
|
|
71
|
+
addLottieShape(rawElements, scalingFactor) {
|
|
72
|
+
const boundingBox = GetShapesBoundingBox(rawElements);
|
|
73
|
+
scalingFactor.x = scalingFactor.x * this._scaleFactor * this._configuration.devicePixelRatio;
|
|
74
|
+
scalingFactor.y = scalingFactor.y * this._scaleFactor * this._configuration.devicePixelRatio;
|
|
75
|
+
// Calculate the size of the sprite in the atlas in pixels
|
|
76
|
+
// This takes into account the scaling factor so in the call to _drawVectorShape the canvas will be scaled when rendering
|
|
77
|
+
this._spriteAtlasInfo.cellWidth = boundingBox.width * scalingFactor.x;
|
|
78
|
+
this._spriteAtlasInfo.cellHeight = boundingBox.height * scalingFactor.y;
|
|
79
|
+
// Check if the sprite fits in the current row
|
|
80
|
+
if (this._currentX + this._spriteAtlasInfo.cellWidth > this._configuration.spriteAtlasWidth) {
|
|
81
|
+
this._currentX = 0;
|
|
82
|
+
this._currentY += this._maxRowHeight; // Add a gap between sprites to avoid bleeding
|
|
83
|
+
this._maxRowHeight = 0;
|
|
84
|
+
}
|
|
85
|
+
// Draw the shape in the canvas
|
|
86
|
+
this._drawVectorShape(rawElements, boundingBox, scalingFactor);
|
|
87
|
+
this._isDirty = true;
|
|
88
|
+
// Get the rest of the sprite information required to render the shape
|
|
89
|
+
this._spriteAtlasInfo.uOffset = this._currentX / this._configuration.spriteAtlasWidth;
|
|
90
|
+
this._spriteAtlasInfo.vOffset = this._currentY / this._configuration.spriteAtlasHeight;
|
|
91
|
+
this._spriteAtlasInfo.widthPx = boundingBox.width;
|
|
92
|
+
this._spriteAtlasInfo.heightPx = boundingBox.height;
|
|
93
|
+
this._spriteAtlasInfo.centerX = boundingBox.centerX;
|
|
94
|
+
this._spriteAtlasInfo.centerY = boundingBox.centerY;
|
|
95
|
+
// Advance the current position for the next sprite
|
|
96
|
+
this._currentX += this._spriteAtlasInfo.cellWidth + this._configuration.gapSize; // Add a gap between sprites to avoid bleeding
|
|
97
|
+
this._maxRowHeight = Math.max(this._maxRowHeight, this._spriteAtlasInfo.cellHeight);
|
|
98
|
+
return this._spriteAtlasInfo;
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Adds a text element that comes from lottie data to the sprite atlas.
|
|
102
|
+
* @param textData The raw text data to add to the atlas.
|
|
103
|
+
* @param scalingFactor The scaling factor to apply to the text.
|
|
104
|
+
* @returns The information on how to find the sprite in the atlas.
|
|
105
|
+
*/
|
|
106
|
+
addLottieText(textData, scalingFactor) {
|
|
107
|
+
if (this._rawFonts === undefined) {
|
|
108
|
+
return undefined;
|
|
109
|
+
}
|
|
110
|
+
// If the text information is malformed and we can't get the bounding box, then just return
|
|
111
|
+
const boundingBox = GetTextBoundingBox(this._spritesCanvasContext, textData, this._rawFonts);
|
|
112
|
+
if (boundingBox === undefined) {
|
|
113
|
+
return undefined;
|
|
114
|
+
}
|
|
115
|
+
scalingFactor.x = scalingFactor.x * this._scaleFactor * this._configuration.devicePixelRatio;
|
|
116
|
+
scalingFactor.y = scalingFactor.y * this._scaleFactor * this._configuration.devicePixelRatio;
|
|
117
|
+
// Calculate the size of the sprite in the atlas in pixels
|
|
118
|
+
// This takes into account the scaling factor so in the call to _drawText the canvas will be scaled when rendering
|
|
119
|
+
this._spriteAtlasInfo.cellWidth = boundingBox.width * scalingFactor.x;
|
|
120
|
+
this._spriteAtlasInfo.cellHeight = boundingBox.height * scalingFactor.y;
|
|
121
|
+
// Find the position to draw the text
|
|
122
|
+
// If the text doesn't fit in the current row, move to the next row
|
|
123
|
+
if (this._currentX + this._spriteAtlasInfo.cellWidth > this._configuration.spriteAtlasWidth) {
|
|
124
|
+
this._currentX = 0;
|
|
125
|
+
this._currentY += this._maxRowHeight; // Add a gap between sprites to avoid bleeding
|
|
126
|
+
this._maxRowHeight = 0;
|
|
127
|
+
}
|
|
128
|
+
// Draw the text in the canvas
|
|
129
|
+
this._drawText(textData, boundingBox, scalingFactor);
|
|
130
|
+
this._isDirty = true;
|
|
131
|
+
// Get the rest of the sprite information required to render the text
|
|
132
|
+
this._spriteAtlasInfo.uOffset = this._currentX / this._configuration.spriteAtlasWidth;
|
|
133
|
+
this._spriteAtlasInfo.vOffset = this._currentY / this._configuration.spriteAtlasHeight;
|
|
134
|
+
this._spriteAtlasInfo.widthPx = boundingBox.width;
|
|
135
|
+
this._spriteAtlasInfo.heightPx = boundingBox.height;
|
|
136
|
+
this._spriteAtlasInfo.centerX = boundingBox.centerX;
|
|
137
|
+
this._spriteAtlasInfo.centerY = boundingBox.centerY;
|
|
138
|
+
// Advance the current position for the next sprite
|
|
139
|
+
this._currentX += this._spriteAtlasInfo.cellWidth + this._configuration.gapSize; // Add a gap between sprites to avoid bleeding
|
|
140
|
+
this._maxRowHeight = Math.max(this._maxRowHeight, this._spriteAtlasInfo.cellHeight);
|
|
141
|
+
return this._spriteAtlasInfo;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Updates the internal atlas texture with the information that has been added to the SpritePacker.
|
|
145
|
+
*/
|
|
146
|
+
updateAtlasTexture() {
|
|
147
|
+
if (!this._isDirty) {
|
|
148
|
+
return; // No need to update if nothing has changed
|
|
149
|
+
}
|
|
150
|
+
// Update the internal texture with the new canvas content
|
|
151
|
+
this._engine.updateDynamicTexture(this._spritesInternalTexture, this._spritesCanvas, false);
|
|
152
|
+
this._isDirty = false;
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Releases the canvas and its context to allow garbage collection.
|
|
156
|
+
*/
|
|
157
|
+
releaseCanvas() {
|
|
158
|
+
this._spritesCanvasContext = undefined; // Clear the context to allow garbage collection
|
|
159
|
+
this._spritesCanvas = undefined; // Clear the canvas to allow garbage collection
|
|
160
|
+
}
|
|
161
|
+
_drawVectorShape(rawElements, boundingBox, scalingFactor) {
|
|
162
|
+
this._spritesCanvasContext.save();
|
|
163
|
+
this._spritesCanvasContext.translate(this._currentX + Math.ceil(boundingBox.strokeInset / 2), this._currentY + Math.ceil(boundingBox.strokeInset / 2));
|
|
164
|
+
this._spritesCanvasContext.scale(scalingFactor.x, scalingFactor.y);
|
|
165
|
+
this._spritesCanvasContext.beginPath();
|
|
166
|
+
for (let i = 0; i < rawElements.length; i++) {
|
|
167
|
+
const shape = rawElements[i];
|
|
168
|
+
switch (shape.ty) {
|
|
169
|
+
case "rc":
|
|
170
|
+
this._drawRectangle(shape);
|
|
171
|
+
break;
|
|
172
|
+
case "sh":
|
|
173
|
+
this._drawPath(shape, boundingBox);
|
|
174
|
+
break;
|
|
175
|
+
case "fl":
|
|
176
|
+
this._drawFill(shape);
|
|
177
|
+
break;
|
|
178
|
+
case "st":
|
|
179
|
+
this._drawStroke(shape);
|
|
180
|
+
break;
|
|
181
|
+
case "gf":
|
|
182
|
+
this._drawGradientFill(shape, boundingBox);
|
|
183
|
+
break;
|
|
184
|
+
case "tr":
|
|
185
|
+
break; // Nothing needed with transforms
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
this._spritesCanvasContext.restore();
|
|
189
|
+
}
|
|
190
|
+
// This function assumes that GetTextBoundingBox has already been called as to measure the text
|
|
191
|
+
// we need to setup the canvas context with the correct font and styles, so we don't set them up here
|
|
192
|
+
// again, but we still need to make sure to restore the context when we are done
|
|
193
|
+
_drawText(textData, boundingBox, scalingFactor) {
|
|
194
|
+
if (this._rawFonts === undefined) {
|
|
195
|
+
this._spritesCanvasContext.restore();
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
const ctx = this._spritesCanvasContext;
|
|
199
|
+
ctx.translate(this._currentX, this._currentY);
|
|
200
|
+
ctx.scale(scalingFactor.x, scalingFactor.y);
|
|
201
|
+
let textInfo = undefined;
|
|
202
|
+
textInfo = textData.d.k[0].s;
|
|
203
|
+
if (textInfo.fc !== undefined && textInfo.fc.length >= 3) {
|
|
204
|
+
const rawFillStyle = textInfo.fc;
|
|
205
|
+
if (Array.isArray(rawFillStyle)) {
|
|
206
|
+
// If the fill style is an array, we assume it's a color array
|
|
207
|
+
ctx.fillStyle = this._lottieColorToCSSColor(rawFillStyle, 1);
|
|
208
|
+
}
|
|
209
|
+
else {
|
|
210
|
+
// If it's a string, we need to get the value from the variables map
|
|
211
|
+
const variableFillStyle = this._variables.get(rawFillStyle);
|
|
212
|
+
if (variableFillStyle !== undefined) {
|
|
213
|
+
ctx.fillStyle = variableFillStyle;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
if (textInfo.sc !== undefined && textInfo.sc.length >= 3 && textInfo.sw !== undefined && textInfo.sw > 0) {
|
|
218
|
+
ctx.strokeStyle = this._lottieColorToCSSColor(textInfo.sc, 1);
|
|
219
|
+
}
|
|
220
|
+
// Text is supported as a possible variable (for localization for example)
|
|
221
|
+
// Check if the text is a variable and replace it if it is
|
|
222
|
+
let text = textInfo.t;
|
|
223
|
+
const variableText = this._variables.get(text);
|
|
224
|
+
if (variableText !== undefined) {
|
|
225
|
+
text = variableText;
|
|
226
|
+
}
|
|
227
|
+
ctx.fillText(text, 0, boundingBox.actualBoundingBoxAscent);
|
|
228
|
+
if (textInfo.sc !== undefined && textInfo.sc.length >= 3 && textInfo.sw !== undefined && textInfo.sw > 0 && textInfo.of === true) {
|
|
229
|
+
ctx.strokeText(text, 0, boundingBox.actualBoundingBoxAscent);
|
|
230
|
+
}
|
|
231
|
+
ctx.restore();
|
|
232
|
+
}
|
|
233
|
+
_drawRectangle(shape) {
|
|
234
|
+
const size = shape.s.k;
|
|
235
|
+
const radius = shape.r.k;
|
|
236
|
+
if (radius <= 0) {
|
|
237
|
+
this._spritesCanvasContext.rect(0, 0, size[0], size[1]);
|
|
238
|
+
}
|
|
239
|
+
else {
|
|
240
|
+
this._spritesCanvasContext.roundRect(0, 0, size[0], size[1], radius);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
_drawPath(shape, boundingBox) {
|
|
244
|
+
// The path data has to be translated to the center of the bounding box
|
|
245
|
+
// If the paths have stroke, we need to account for the stroke width
|
|
246
|
+
const pathData = shape.ks.k;
|
|
247
|
+
const xTranslate = boundingBox.width / 2 - boundingBox.centerX - Math.ceil(boundingBox.strokeInset);
|
|
248
|
+
const yTranslate = boundingBox.height / 2 - boundingBox.centerY - Math.ceil(boundingBox.strokeInset);
|
|
249
|
+
const vertices = pathData.v;
|
|
250
|
+
const inTangents = pathData.i;
|
|
251
|
+
const outTangents = pathData.o;
|
|
252
|
+
if (vertices.length > 0) {
|
|
253
|
+
this._spritesCanvasContext.moveTo(vertices[0][0] + xTranslate, vertices[0][1] + yTranslate);
|
|
254
|
+
for (let i = 0; i < vertices.length - 1; i++) {
|
|
255
|
+
const start = vertices[i];
|
|
256
|
+
const end = vertices[i + 1];
|
|
257
|
+
const outTangent = outTangents[i];
|
|
258
|
+
const inTangent = inTangents[i + 1];
|
|
259
|
+
this._spritesCanvasContext.bezierCurveTo(start[0] + xTranslate + outTangent[0], start[1] + yTranslate + outTangent[1], end[0] + xTranslate + inTangent[0], end[1] + yTranslate + inTangent[1], end[0] + xTranslate, end[1] + yTranslate);
|
|
260
|
+
}
|
|
261
|
+
if (pathData.c) {
|
|
262
|
+
// Close path with curve from last to first point
|
|
263
|
+
const start = vertices[vertices.length - 1];
|
|
264
|
+
const end = vertices[0];
|
|
265
|
+
const outTangent = outTangents[vertices.length - 1];
|
|
266
|
+
const inTangent = inTangents[0];
|
|
267
|
+
this._spritesCanvasContext.bezierCurveTo(start[0] + xTranslate + outTangent[0], start[1] + yTranslate + outTangent[1], end[0] + xTranslate + inTangent[0], end[1] + yTranslate + inTangent[1], end[0] + xTranslate, end[1] + yTranslate);
|
|
268
|
+
this._spritesCanvasContext.closePath();
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
_drawFill(fill) {
|
|
273
|
+
const color = this._lottieColorToCSSColor(fill.c.k, fill.o.k / 100);
|
|
274
|
+
this._spritesCanvasContext.fillStyle = color;
|
|
275
|
+
this._spritesCanvasContext.fill();
|
|
276
|
+
}
|
|
277
|
+
_drawStroke(stroke) {
|
|
278
|
+
// Color and opacity
|
|
279
|
+
const opacity = stroke.o?.k ?? 100;
|
|
280
|
+
const color = this._lottieColorToCSSColor(stroke.c?.k ?? [0, 0, 0], opacity / 100);
|
|
281
|
+
this._spritesCanvasContext.strokeStyle = color;
|
|
282
|
+
// Width
|
|
283
|
+
const width = stroke.w?.k ?? 1;
|
|
284
|
+
this._spritesCanvasContext.lineWidth = width;
|
|
285
|
+
// Line cap
|
|
286
|
+
switch (stroke.lc) {
|
|
287
|
+
case 1:
|
|
288
|
+
this._spritesCanvasContext.lineCap = "butt";
|
|
289
|
+
break;
|
|
290
|
+
case 2:
|
|
291
|
+
this._spritesCanvasContext.lineCap = "round";
|
|
292
|
+
break;
|
|
293
|
+
case 3:
|
|
294
|
+
this._spritesCanvasContext.lineCap = "square";
|
|
295
|
+
break;
|
|
296
|
+
default:
|
|
297
|
+
// leave default
|
|
298
|
+
break;
|
|
299
|
+
}
|
|
300
|
+
// Line join
|
|
301
|
+
switch (stroke.lj) {
|
|
302
|
+
case 1:
|
|
303
|
+
this._spritesCanvasContext.lineJoin = "miter";
|
|
304
|
+
break;
|
|
305
|
+
case 2:
|
|
306
|
+
this._spritesCanvasContext.lineJoin = "round";
|
|
307
|
+
break;
|
|
308
|
+
case 3:
|
|
309
|
+
this._spritesCanvasContext.lineJoin = "bevel";
|
|
310
|
+
break;
|
|
311
|
+
default:
|
|
312
|
+
// leave default
|
|
313
|
+
break;
|
|
314
|
+
}
|
|
315
|
+
// Miter limit
|
|
316
|
+
if (stroke.ml !== undefined) {
|
|
317
|
+
this._spritesCanvasContext.miterLimit = stroke.ml;
|
|
318
|
+
}
|
|
319
|
+
// Dash pattern
|
|
320
|
+
const dashes = stroke.d;
|
|
321
|
+
if (dashes !== undefined) {
|
|
322
|
+
const lineDashes = [];
|
|
323
|
+
for (let i = 0; i < dashes.length; i++) {
|
|
324
|
+
if (dashes[i].n === "d") {
|
|
325
|
+
lineDashes.push(dashes[i].v.k);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
this._spritesCanvasContext.setLineDash(lineDashes);
|
|
329
|
+
}
|
|
330
|
+
this._spritesCanvasContext.stroke();
|
|
331
|
+
}
|
|
332
|
+
_drawGradientFill(fill, boundingBox) {
|
|
333
|
+
switch (fill.t) {
|
|
334
|
+
case 1: {
|
|
335
|
+
this._drawLinearGradientFill(fill, boundingBox);
|
|
336
|
+
break;
|
|
337
|
+
}
|
|
338
|
+
case 2: {
|
|
339
|
+
this._drawRadialGradientFill(fill, boundingBox);
|
|
340
|
+
break;
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
_drawLinearGradientFill(fill, boundingBox) {
|
|
345
|
+
// We need to translate the gradient to the center of the bounding box
|
|
346
|
+
const xTranslate = boundingBox.width / 2 - boundingBox.centerX;
|
|
347
|
+
const yTranslate = boundingBox.height / 2 - boundingBox.centerY;
|
|
348
|
+
// Create the gradient
|
|
349
|
+
const startPoint = fill.s.k;
|
|
350
|
+
const endPoint = fill.e.k;
|
|
351
|
+
const gradient = this._spritesCanvasContext.createLinearGradient(startPoint[0] + xTranslate, startPoint[1] + yTranslate, endPoint[0] + xTranslate, endPoint[1] + yTranslate);
|
|
352
|
+
this._addColorStops(gradient, fill);
|
|
353
|
+
this._spritesCanvasContext.fillStyle = gradient;
|
|
354
|
+
this._spritesCanvasContext.fill();
|
|
355
|
+
}
|
|
356
|
+
_drawRadialGradientFill(fill, boundingBox) {
|
|
357
|
+
// We need to translate the gradient to the center of the bounding box
|
|
358
|
+
const xTranslate = boundingBox.width / 2 - boundingBox.centerX;
|
|
359
|
+
const yTranslate = boundingBox.height / 2 - boundingBox.centerY;
|
|
360
|
+
// Create the gradient
|
|
361
|
+
const startPoint = fill.s.k;
|
|
362
|
+
const endPoint = fill.e.k;
|
|
363
|
+
const gradient = this._spritesCanvasContext.createRadialGradient(startPoint[0] + xTranslate, startPoint[1] + yTranslate, 0, endPoint[0] + xTranslate, endPoint[1] + yTranslate, Math.hypot(endPoint[0] - startPoint[0], endPoint[1] - startPoint[1]) // End radius
|
|
364
|
+
);
|
|
365
|
+
this._addColorStops(gradient, fill);
|
|
366
|
+
this._spritesCanvasContext.fillStyle = gradient;
|
|
367
|
+
this._spritesCanvasContext.fill();
|
|
368
|
+
}
|
|
369
|
+
_addColorStops(gradient, fill) {
|
|
370
|
+
const stops = fill.g.p;
|
|
371
|
+
const rawColors = fill.g.k.k;
|
|
372
|
+
let stopsData = undefined;
|
|
373
|
+
if (rawColors.length / stops === 4) {
|
|
374
|
+
stopsData = this._gradientColorsToCssColor(rawColors, stops, false);
|
|
375
|
+
}
|
|
376
|
+
else if (rawColors.length / stops === 6) {
|
|
377
|
+
stopsData = this._gradientColorsToCssColor(rawColors, stops, true);
|
|
378
|
+
}
|
|
379
|
+
else {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
for (let i = 0; i < stops; i++) {
|
|
383
|
+
gradient.addColorStop(stopsData[i].offset, stopsData[i].color);
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
_gradientColorsToCssColor(colors, stops, hasAlpha) {
|
|
387
|
+
const skipElement = hasAlpha ? 0 : 1;
|
|
388
|
+
const result = [];
|
|
389
|
+
for (let i = 0; i < stops; i++) {
|
|
390
|
+
const index = i * 4;
|
|
391
|
+
result.push({
|
|
392
|
+
offset: colors[index],
|
|
393
|
+
color: this._lottieColorToCSSColor(colors.slice(index + skipElement, index + 4), 1),
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
return result;
|
|
397
|
+
}
|
|
398
|
+
_lottieColorToCSSColor(color, opacity) {
|
|
399
|
+
if (color.length !== 3 && color.length !== 4) {
|
|
400
|
+
return "rgba(0, 0, 0, 1)"; // Default to black if invalid
|
|
401
|
+
}
|
|
402
|
+
const r = Math.round(color[0] * 255);
|
|
403
|
+
const g = Math.round(color[1] * 255);
|
|
404
|
+
const b = Math.round(color[2] * 255);
|
|
405
|
+
const a = (color[3] || 1) * opacity;
|
|
406
|
+
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
//# sourceMappingURL=spritePacker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spritePacker.js","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/parsing/spritePacker.ts"],"names":[],"mappings":"AAAA,qEAAuD;AAKvD,OAAO,EAAE,WAAW,EAAE,0DAA4C;AAKlE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA8DhF;;GAEG;AACH,MAAM,OAAO,YAAY;IAoBrB;;;OAGG;IACH,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAW,QAAQ,CAAC,QAA8B;QAC9C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC9B,CAAC;IAED;;;;;;;OAOG;IACH,YAAmB,MAAkB,EAAE,YAAqB,EAAE,WAAmB,EAAE,SAA8B,EAAE,aAAqC;QACpJ,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAChC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAEvB,IAAI,YAAY,EAAE,CAAC;YACf,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;YACjE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,CAA6B,CAAC;QAClG,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;YACvH,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,CAAsC,CAAC;QAC3G,CAAC;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,iBAAiB,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB;QAC5K,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QAE5F,IAAI,CAAC,eAAe,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,mBAAmB;QACnD,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,mBAAmB;QAEnD,IAAI,CAAC,gBAAgB,GAAG;YACpB,OAAO,EAAE,CAAC;YACV,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,CAAC;YACX,OAAO,EAAE,CAAC;YACV,OAAO,EAAE,CAAC;SACb,CAAC;IACN,CAAC;IAED;;;;;OAKG;IACI,cAAc,CAAC,WAAyB,EAAE,aAA2B;QACxE,MAAM,WAAW,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAEtD,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAC7F,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAE7F,0DAA0D;QAC1D,yHAAyH;QACzH,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC;QAExE,8CAA8C;QAC9C,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC;YAC1F,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,8CAA8C;YACpF,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAC3B,CAAC;QAED,+BAA+B;QAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;QAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,sEAAsE;QACtE,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QACtF,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC;QAEvF,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;QAEpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QACpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAEpD,mDAAmD;QACnD,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,8CAA8C;QAC/H,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAEpF,OAAO,IAAI,CAAC,gBAAgB,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACI,aAAa,CAAC,QAAqB,EAAE,aAA2B;QACnE,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,2FAA2F;QAC3F,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7F,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAC7F,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAE7F,0DAA0D;QAC1D,kHAAkH;QAClH,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC;QAExE,qCAAqC;QACrC,mEAAmE;QACnE,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC;YAC1F,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,8CAA8C;YACpF,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAC3B,CAAC;QAED,8BAA8B;QAC9B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,qEAAqE;QACrE,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QACtF,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC;QAEvF,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;QAEpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QACpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAEpD,mDAAmD;QACnD,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,8CAA8C;QAC/H,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAEpF,OAAO,IAAI,CAAC,gBAAgB,CAAC;IACjC,CAAC;IAED;;OAEG;IACI,kBAAkB;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO,CAAC,2CAA2C;QACvD,CAAC;QAED,0DAA0D;QAC1D,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QAC5F,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED;;OAEG;IACI,aAAa;QAChB,IAAI,CAAC,qBAAqB,GAAG,SAAgB,CAAC,CAAC,gDAAgD;QAC/F,IAAI,CAAC,cAAc,GAAG,SAAgB,CAAC,CAAC,+CAA+C;IAC3F,CAAC;IAEO,gBAAgB,CAAC,WAAyB,EAAE,WAAwB,EAAE,aAA2B;QACrG,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;QAElC,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;QACvJ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QAEnE,IAAI,CAAC,qBAAqB,CAAC,SAAS,EAAE,CAAC;QACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC1C,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;YAC7B,QAAQ,KAAK,CAAC,EAAE,EAAE,CAAC;gBACf,KAAK,IAAI;oBACL,IAAI,CAAC,cAAc,CAAC,KAA0B,CAAC,CAAC;oBAChD,MAAM;gBACV,KAAK,IAAI;oBACL,IAAI,CAAC,SAAS,CAAC,KAAqB,EAAE,WAAW,CAAC,CAAC;oBACnD,MAAM;gBACV,KAAK,IAAI;oBACL,IAAI,CAAC,SAAS,CAAC,KAAqB,CAAC,CAAC;oBACtC,MAAM;gBACV,KAAK,IAAI;oBACL,IAAI,CAAC,WAAW,CAAC,KAAuB,CAAC,CAAC;oBAC1C,MAAM;gBACV,KAAK,IAAI;oBACL,IAAI,CAAC,iBAAiB,CAAC,KAA6B,EAAE,WAAW,CAAC,CAAC;oBACnE,MAAM;gBACV,KAAK,IAAI;oBACL,MAAM,CAAC,iCAAiC;YAChD,CAAC;QACL,CAAC;QAED,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;IACzC,CAAC;IAED,+FAA+F;IAC/F,qGAAqG;IACrG,gFAAgF;IACxE,SAAS,CAAC,QAAqB,EAAE,WAAwB,EAAE,aAA2B;QAC1F,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;YACrC,OAAO;QACX,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,qBAAqB,CAAC;QAEvC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9C,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QAE5C,IAAI,QAAQ,GAAgC,SAAS,CAAC;QACtD,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAoB,CAAC;QAEhD,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACvD,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,CAAC;YACjC,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC9B,8DAA8D;gBAC9D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YACjE,CAAC;iBAAM,CAAC;gBACJ,oEAAoE;gBACpE,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;gBAC5D,IAAI,iBAAiB,KAAK,SAAS,EAAE,CAAC;oBAClC,GAAG,CAAC,SAAS,GAAG,iBAAiB,CAAC;gBACtC,CAAC;YACL,CAAC;QACL,CAAC;QAED,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;YACvG,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAClE,CAAC;QAED,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;QACtB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC7B,IAAI,GAAG,YAAY,CAAC;QACxB,CAAC;QAED,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC,uBAAwB,CAAC,CAAC;QAC5D,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,GAAG,CAAC,IAAI,QAAQ,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;YAC/H,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC,uBAAwB,CAAC,CAAC;QAClE,CAAC;QAED,GAAG,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IAEO,cAAc,CAAC,KAAwB;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAa,CAAC;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAW,CAAC;QAEnC,IAAI,MAAM,IAAI,CAAC,EAAE,CAAC;YACd,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACzE,CAAC;IACL,CAAC;IAEO,SAAS,CAAC,KAAmB,EAAE,WAAwB;QAC3D,uEAAuE;QACvE,oEAAoE;QACpE,MAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,CAAc,CAAC;QACzC,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACpG,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAErG,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC;QAC5B,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;QAC9B,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC;QAE/B,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACtB,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;YAE5F,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAC1B,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;gBAClC,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAEpC,IAAI,CAAC,qBAAqB,CAAC,aAAa,CACpC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,EACrC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,EACrC,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,EAClC,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,EAClC,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,EACnB,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,CACtB,CAAC;YACN,CAAC;YAED,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC;gBACb,iDAAiD;gBACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC5C,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACxB,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBACpD,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;gBAEhC,IAAI,CAAC,qBAAqB,CAAC,aAAa,CACpC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,EACrC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,EACrC,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,EAClC,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,EAClC,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,EACnB,GAAG,CAAC,CAAC,CAAC,GAAG,UAAU,CACtB,CAAC;gBAEF,IAAI,CAAC,qBAAqB,CAAC,SAAS,EAAE,CAAC;YAC3C,CAAC;QACL,CAAC;IACL,CAAC;IAEO,SAAS,CAAC,IAAkB;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAa,EAAG,IAAI,CAAC,CAAC,CAAC,CAAY,GAAG,GAAG,CAAC,CAAC;QAC5F,IAAI,CAAC,qBAAqB,CAAC,SAAS,GAAG,KAAK,CAAC;QAE7C,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC;IAEO,WAAW,CAAC,MAAsB;QACtC,oBAAoB;QACpB,MAAM,OAAO,GAAI,MAAM,CAAC,CAAC,EAAE,CAAY,IAAI,GAAG,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAE,MAAM,CAAC,CAAC,EAAE,CAAc,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,GAAG,GAAG,CAAC,CAAC;QACjG,IAAI,CAAC,qBAAqB,CAAC,WAAW,GAAG,KAAK,CAAC;QAE/C,QAAQ;QACR,MAAM,KAAK,GAAI,MAAM,CAAC,CAAC,EAAE,CAAY,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,qBAAqB,CAAC,SAAS,GAAG,KAAK,CAAC;QAE7C,WAAW;QACX,QAAQ,MAAM,CAAC,EAAE,EAAE,CAAC;YAChB,KAAK,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC5C,MAAM;YACV,KAAK,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC;gBAC7C,MAAM;YACV,KAAK,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,QAAQ,CAAC;gBAC9C,MAAM;YACV;gBACI,gBAAgB;gBAChB,MAAM;QACd,CAAC;QAED,YAAY;QACZ,QAAQ,MAAM,CAAC,EAAE,EAAE,CAAC;YAChB,KAAK,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,QAAQ,GAAG,OAAO,CAAC;gBAC9C,MAAM;YACV,KAAK,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,QAAQ,GAAG,OAAO,CAAC;gBAC9C,MAAM;YACV,KAAK,CAAC;gBACF,IAAI,CAAC,qBAAqB,CAAC,QAAQ,GAAG,OAAO,CAAC;gBAC9C,MAAM;YACV;gBACI,gBAAgB;gBAChB,MAAM;QACd,CAAC;QAED,cAAc;QACd,IAAI,MAAM,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;YAC1B,IAAI,CAAC,qBAAqB,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC;QACtD,CAAC;QAED,eAAe;QACf,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;QACxB,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACvB,MAAM,UAAU,GAAa,EAAE,CAAC;YAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBACtB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAW,CAAC,CAAC;gBAC7C,CAAC;YACL,CAAC;YAED,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;IACxC,CAAC;IAEO,iBAAiB,CAAC,IAA0B,EAAE,WAAwB;QAC1E,QAAQ,IAAI,CAAC,CAAC,EAAE,CAAC;YACb,KAAK,CAAC,CAAC,CAAC,CAAC;gBACL,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;gBAChD,MAAM;YACV,CAAC;YACD,KAAK,CAAC,CAAC,CAAC,CAAC;gBACL,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;gBAChD,MAAM;YACV,CAAC;QACL,CAAC;IACL,CAAC;IAEO,uBAAuB,CAAC,IAA0B,EAAE,WAAwB;QAChF,sEAAsE;QACtE,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC;QAC/D,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC;QAEhE,sBAAsB;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,CAAa,CAAC;QACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAa,CAAC;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAC5D,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,EAC1B,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,EAC1B,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,EACxB,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAC3B,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,qBAAqB,CAAC,SAAS,GAAG,QAAQ,CAAC;QAChD,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC;IAEO,uBAAuB,CAAC,IAA0B,EAAE,WAAwB;QAChF,sEAAsE;QACtE,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC;QAC/D,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC;QAEhE,sBAAsB;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,CAAa,CAAC;QACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAa,CAAC;QAEtC,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAC5D,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,EAC1B,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,EAC1B,CAAC,EACD,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,EACxB,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,EACxB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa;SACrF,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,qBAAqB,CAAC,SAAS,GAAG,QAAQ,CAAC;QAChD,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC;IAEO,cAAc,CAAC,QAAwB,EAAE,IAA0B;QACvE,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7B,IAAI,SAAS,GAA+B,SAAS,CAAC;QACtD,IAAI,SAAS,CAAC,MAAM,GAAG,KAAK,KAAK,CAAC,EAAE,CAAC;YACjC,SAAS,GAAG,IAAI,CAAC,yBAAyB,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxE,CAAC;aAAM,IAAI,SAAS,CAAC,MAAM,GAAG,KAAK,KAAK,CAAC,EAAE,CAAC;YACxC,SAAS,GAAG,IAAI,CAAC,yBAAyB,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACJ,OAAO;QACX,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC;IACL,CAAC;IAEO,yBAAyB,CAAC,MAAgB,EAAE,KAAa,EAAE,QAAiB;QAChF,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,MAAM,GAAmB,EAAE,CAAC;QAClC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACpB,MAAM,CAAC,IAAI,CAAC;gBACR,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC;gBACrB,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;aACtF,CAAC,CAAC;QACP,CAAC;QAED,OAAO,MAAM,CAAC;IAClB,CAAC;IAEO,sBAAsB,CAAC,KAAe,EAAE,OAAe;QAC3D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,kBAAkB,CAAC,CAAC,8BAA8B;QAC7D,CAAC;QAED,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC;QAEpC,OAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;IAC1C,CAAC;CACJ"}
|
package/player.d.ts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { Nullable } from "@babylonjs/core/types.js";
|
|
2
|
+
import type { AnimationConfiguration } from "./animationConfiguration.js";
|
|
3
|
+
/**
|
|
4
|
+
* Allows you to play Lottie animations using Babylon.js.
|
|
5
|
+
* It plays the animations in a worker thread using OffscreenCanvas.
|
|
6
|
+
* Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
|
|
7
|
+
*/
|
|
8
|
+
export declare class Player {
|
|
9
|
+
private readonly _container;
|
|
10
|
+
private readonly _animationFile;
|
|
11
|
+
private readonly _variables;
|
|
12
|
+
private readonly _configuration;
|
|
13
|
+
private _playing;
|
|
14
|
+
private _disposed;
|
|
15
|
+
private _worker;
|
|
16
|
+
private _canvas;
|
|
17
|
+
private _animationWidth;
|
|
18
|
+
private _animationHeight;
|
|
19
|
+
private _scaleFactor;
|
|
20
|
+
private _resizeObserver;
|
|
21
|
+
/**
|
|
22
|
+
* Creates a new instance of the LottiePlayer.
|
|
23
|
+
* @param container The HTMLDivElement to create the canvas in and render the animation on.
|
|
24
|
+
* @param animationFile The URL of the Lottie animation file to be played.
|
|
25
|
+
* @param variables Optional map of variables to replace in the animation file.
|
|
26
|
+
* @param configuration Optional configuration object to customize the animation playback.
|
|
27
|
+
*/
|
|
28
|
+
constructor(container: HTMLDivElement, animationFile: string, variables?: Nullable<Map<string, string>>, configuration?: Nullable<Partial<AnimationConfiguration>>);
|
|
29
|
+
/**
|
|
30
|
+
* Loads and plays a lottie animation using a webworker and offscreen canvas.
|
|
31
|
+
* If OffscreenCanvas is not supported by the browser, the animation will not play. Try using LocalLottiePlayer instead.
|
|
32
|
+
* @returns True if the animation is successfully set up to play, false if the animation couldn't play.
|
|
33
|
+
*/
|
|
34
|
+
playAnimation(): boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
37
|
+
*/
|
|
38
|
+
dispose(): void;
|
|
39
|
+
private _onWindowResize;
|
|
40
|
+
private _onBeforeUnload;
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=player.d.ts.map
|
package/player.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,iCAAmB;AAC3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAIvE;;;;GAIG;AACH,qBAAa,MAAM;IACf,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IACxC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAgC;IAC3D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA4C;IAE3E,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,eAAe,CAAkC;IAEzD;;;;;;OAMG;gBAEC,SAAS,EAAE,cAAc,EACzB,aAAa,EAAE,MAAM,EACrB,SAAS,GAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAQ,EAC/C,aAAa,GAAE,QAAQ,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAQ;IAQnE;;;;OAIG;IACI,aAAa,IAAI,OAAO;IAkG/B;;OAEG;IACI,OAAO,IAAI,IAAI;IAmBtB,OAAO,CAAC,eAAe,CASrB;IAEF,OAAO,CAAC,eAAe,CAGrB;CACL"}
|
package/player.js
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { CalculateScaleFactor } from "./rendering/animationController.js";
|
|
2
|
+
/**
|
|
3
|
+
* Allows you to play Lottie animations using Babylon.js.
|
|
4
|
+
* It plays the animations in a worker thread using OffscreenCanvas.
|
|
5
|
+
* Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
|
|
6
|
+
*/
|
|
7
|
+
export class Player {
|
|
8
|
+
/**
|
|
9
|
+
* Creates a new instance of the LottiePlayer.
|
|
10
|
+
* @param container The HTMLDivElement to create the canvas in and render the animation on.
|
|
11
|
+
* @param animationFile The URL of the Lottie animation file to be played.
|
|
12
|
+
* @param variables Optional map of variables to replace in the animation file.
|
|
13
|
+
* @param configuration Optional configuration object to customize the animation playback.
|
|
14
|
+
*/
|
|
15
|
+
constructor(container, animationFile, variables = null, configuration = null) {
|
|
16
|
+
this._playing = false;
|
|
17
|
+
this._disposed = false;
|
|
18
|
+
this._worker = null;
|
|
19
|
+
this._canvas = null;
|
|
20
|
+
this._animationWidth = 0;
|
|
21
|
+
this._animationHeight = 0;
|
|
22
|
+
this._scaleFactor = 1;
|
|
23
|
+
this._resizeObserver = null;
|
|
24
|
+
this._onWindowResize = () => {
|
|
25
|
+
if (this._disposed || !this._canvas || !this._worker) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const w = this._canvas.clientWidth;
|
|
29
|
+
const h = this._canvas.clientHeight;
|
|
30
|
+
this._worker.postMessage({ width: w, height: h });
|
|
31
|
+
};
|
|
32
|
+
this._onBeforeUnload = () => {
|
|
33
|
+
this._worker?.terminate();
|
|
34
|
+
this._worker = null;
|
|
35
|
+
};
|
|
36
|
+
this._container = container;
|
|
37
|
+
this._animationFile = animationFile;
|
|
38
|
+
this._variables = variables;
|
|
39
|
+
this._configuration = configuration;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Loads and plays a lottie animation using a webworker and offscreen canvas.
|
|
43
|
+
* If OffscreenCanvas is not supported by the browser, the animation will not play. Try using LocalLottiePlayer instead.
|
|
44
|
+
* @returns True if the animation is successfully set up to play, false if the animation couldn't play.
|
|
45
|
+
*/
|
|
46
|
+
playAnimation() {
|
|
47
|
+
if (this._playing || this._disposed) {
|
|
48
|
+
return false;
|
|
49
|
+
}
|
|
50
|
+
if ("OffscreenCanvas" in window) {
|
|
51
|
+
this._worker = new Worker(new URL("./worker", import.meta.url), { type: "module" });
|
|
52
|
+
this._worker.onmessage = (evt) => {
|
|
53
|
+
const message = evt.data;
|
|
54
|
+
if (message === undefined) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
switch (message.type) {
|
|
58
|
+
case "animationSize": {
|
|
59
|
+
if (this._worker === null) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
const payload = message.payload;
|
|
63
|
+
this._animationWidth = payload.width;
|
|
64
|
+
this._animationHeight = payload.height;
|
|
65
|
+
// Create the canvas element
|
|
66
|
+
this._canvas = document.createElement("canvas");
|
|
67
|
+
// Center the canvas in the container
|
|
68
|
+
this._canvas.style.position = "absolute";
|
|
69
|
+
this._canvas.style.left = "50%";
|
|
70
|
+
this._canvas.style.top = "50%";
|
|
71
|
+
this._canvas.style.transform = "translate(-50%, -50%)";
|
|
72
|
+
this._canvas.style.display = "block";
|
|
73
|
+
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
74
|
+
this._scaleFactor = CalculateScaleFactor(this._animationWidth, this._animationHeight, this._container);
|
|
75
|
+
this._canvas.style.width = `${this._animationWidth * this._scaleFactor}px`;
|
|
76
|
+
this._canvas.style.height = `${this._animationHeight * this._scaleFactor}px`;
|
|
77
|
+
// Append the canvas to the container
|
|
78
|
+
this._container.appendChild(this._canvas);
|
|
79
|
+
const offscreen = this._canvas.transferControlToOffscreen();
|
|
80
|
+
const startAnimationMessage = {
|
|
81
|
+
type: "startAnimation",
|
|
82
|
+
payload: {
|
|
83
|
+
canvas: offscreen,
|
|
84
|
+
scaleFactor: this._scaleFactor,
|
|
85
|
+
variables: this._variables,
|
|
86
|
+
configuration: this._configuration,
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
this._worker.postMessage(startAnimationMessage, [offscreen]);
|
|
90
|
+
break;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
const animationUrlMessage = {
|
|
95
|
+
type: "animationUrl",
|
|
96
|
+
payload: {
|
|
97
|
+
url: this._animationFile,
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
this._worker.postMessage(animationUrlMessage);
|
|
101
|
+
window.addEventListener("resize", this._onWindowResize);
|
|
102
|
+
window.addEventListener("beforeunload", this._onBeforeUnload);
|
|
103
|
+
if ("ResizeObserver" in window) {
|
|
104
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
105
|
+
if (this._disposed || !this._canvas || !this._worker) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
109
|
+
this._scaleFactor = CalculateScaleFactor(this._animationWidth, this._animationHeight, this._container);
|
|
110
|
+
this._canvas.style.width = `${this._animationWidth * this._scaleFactor}px`;
|
|
111
|
+
this._canvas.style.height = `${this._animationHeight * this._scaleFactor}px`;
|
|
112
|
+
const containerResizeMessage = {
|
|
113
|
+
type: "containerResize",
|
|
114
|
+
payload: {
|
|
115
|
+
scaleFactor: this._scaleFactor,
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
this._worker.postMessage(containerResizeMessage);
|
|
119
|
+
});
|
|
120
|
+
this._resizeObserver.observe(this._container);
|
|
121
|
+
}
|
|
122
|
+
return true;
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
return false;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
130
|
+
*/
|
|
131
|
+
dispose() {
|
|
132
|
+
window.removeEventListener("resize", this._onWindowResize);
|
|
133
|
+
window.removeEventListener("beforeunload", this._onBeforeUnload);
|
|
134
|
+
if (this._resizeObserver) {
|
|
135
|
+
this._resizeObserver.disconnect();
|
|
136
|
+
this._resizeObserver = null;
|
|
137
|
+
}
|
|
138
|
+
this._onBeforeUnload();
|
|
139
|
+
if (this._canvas) {
|
|
140
|
+
this._container.removeChild(this._canvas);
|
|
141
|
+
this._canvas = null;
|
|
142
|
+
}
|
|
143
|
+
this._disposed = true;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
//# sourceMappingURL=player.js.map
|
package/player.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"player.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"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"}
|