@babylonjs/lottie-player 8.26.0 → 8.26.2
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/localPlayer.d.ts +3 -1
- package/localPlayer.d.ts.map +1 -1
- package/localPlayer.js +31 -19
- package/localPlayer.js.map +1 -1
- package/package.json +1 -1
- package/player.d.ts +3 -1
- package/player.d.ts.map +1 -1
- package/player.js +37 -25
- package/player.js.map +1 -1
- package/rendering/animationController.d.ts +0 -8
- package/rendering/animationController.d.ts.map +1 -1
- package/rendering/animationController.js +13 -18
- package/rendering/animationController.js.map +1 -1
- package/rendering/calculateScaleFactor.d.ts +9 -0
- package/rendering/calculateScaleFactor.d.ts.map +1 -0
- package/rendering/calculateScaleFactor.js +17 -0
- package/rendering/calculateScaleFactor.js.map +1 -0
package/localPlayer.d.ts
CHANGED
|
@@ -17,6 +17,8 @@ export declare class LocalPlayer {
|
|
|
17
17
|
private _canvas;
|
|
18
18
|
private _resizeObserver;
|
|
19
19
|
private _animationController;
|
|
20
|
+
private _resizeDebounceHandle;
|
|
21
|
+
private _resizeDebounceMs;
|
|
20
22
|
/**
|
|
21
23
|
* Creates a new instance of the LottiePlayer.
|
|
22
24
|
* @param container The HTMLDivElement to create the canvas in and render the animation on.
|
|
@@ -34,6 +36,6 @@ export declare class LocalPlayer {
|
|
|
34
36
|
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
35
37
|
*/
|
|
36
38
|
dispose(): void;
|
|
37
|
-
private
|
|
39
|
+
private _scheduleResizeUpdate;
|
|
38
40
|
}
|
|
39
41
|
//# sourceMappingURL=localPlayer.d.ts.map
|
package/localPlayer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localPlayer.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"localPlayer.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAM7D;;;;GAIG;AACH,qBAAa,WAAW;IACpB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA8B;IAC/D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkC;IAEjE,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,qBAAqB,CAAuB;IACpD,OAAO,CAAC,iBAAiB,CAAqB;IAE9C;;;;;;OAMG;gBACgB,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,GAAG,kBAAkB,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,aAAa,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC;IAO5K;;;OAGG;IACU,kBAAkB,IAAI,OAAO,CAAC,OAAO,CAAC;IAkDnD;;OAEG;IACI,OAAO,IAAI,IAAI;IAmBtB,OAAO,CAAC,qBAAqB;CAyBhC"}
|
package/localPlayer.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { DefaultConfiguration } from "./animationConfiguration.js";
|
|
2
2
|
import { GetRawAnimationDataAsync } from "./parsing/parser.js";
|
|
3
|
-
import { AnimationController
|
|
3
|
+
import { AnimationController } from "./rendering/animationController.js";
|
|
4
|
+
import { CalculateScaleFactor } from "./rendering/calculateScaleFactor.js";
|
|
4
5
|
/**
|
|
5
6
|
* Allows you to play Lottie animations using Babylon.js.
|
|
6
7
|
* It plays the animations in the main JS thread. Prefer to use Player instead if Offscreen canvas and worker threads are supported.
|
|
@@ -22,15 +23,8 @@ export class LocalPlayer {
|
|
|
22
23
|
this._canvas = null;
|
|
23
24
|
this._resizeObserver = null;
|
|
24
25
|
this._animationController = null;
|
|
25
|
-
this.
|
|
26
|
-
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._container);
|
|
30
|
-
this._canvas.style.width = `${this._rawAnimation.w * this._scaleFactor}px`;
|
|
31
|
-
this._canvas.style.height = `${this._rawAnimation.h * this._scaleFactor}px`;
|
|
32
|
-
this._animationController.setScale(this._scaleFactor);
|
|
33
|
-
};
|
|
26
|
+
this._resizeDebounceHandle = null;
|
|
27
|
+
this._resizeDebounceMs = 1000 / 60; // Debounce resize updates to approximately 60 FPS
|
|
34
28
|
this._container = container;
|
|
35
29
|
this._animationSource = animationSource;
|
|
36
30
|
this._variables = variables ?? new Map();
|
|
@@ -53,6 +47,7 @@ export class LocalPlayer {
|
|
|
53
47
|
}
|
|
54
48
|
// Create the canvas element
|
|
55
49
|
this._canvas = document.createElement("canvas");
|
|
50
|
+
this._canvas.id = "babylon-canvas";
|
|
56
51
|
// Center the canvas in the container
|
|
57
52
|
this._canvas.style.position = "absolute";
|
|
58
53
|
this._canvas.style.left = "50%";
|
|
@@ -72,16 +67,9 @@ export class LocalPlayer {
|
|
|
72
67
|
this._animationController = new AnimationController(this._canvas, this._rawAnimation, this._scaleFactor, this._variables, finalConfig);
|
|
73
68
|
this._animationController.playAnimation();
|
|
74
69
|
this._playing = true;
|
|
75
|
-
window.addEventListener("resize", this._onWindowResize);
|
|
76
70
|
if ("ResizeObserver" in window) {
|
|
77
71
|
this._resizeObserver = new ResizeObserver(() => {
|
|
78
|
-
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._container);
|
|
82
|
-
this._canvas.style.width = `${this._rawAnimation.w * this._scaleFactor}px`;
|
|
83
|
-
this._canvas.style.height = `${this._rawAnimation.h * this._scaleFactor}px`;
|
|
84
|
-
this._animationController.setScale(this._scaleFactor);
|
|
72
|
+
this._scheduleResizeUpdate();
|
|
85
73
|
});
|
|
86
74
|
this._resizeObserver.observe(this._container);
|
|
87
75
|
}
|
|
@@ -91,16 +79,40 @@ export class LocalPlayer {
|
|
|
91
79
|
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
92
80
|
*/
|
|
93
81
|
dispose() {
|
|
94
|
-
window.removeEventListener("resize", this._onWindowResize);
|
|
95
82
|
if (this._resizeObserver) {
|
|
96
83
|
this._resizeObserver.disconnect();
|
|
97
84
|
this._resizeObserver = null;
|
|
98
85
|
}
|
|
86
|
+
if (this._resizeDebounceHandle !== null) {
|
|
87
|
+
clearTimeout(this._resizeDebounceHandle);
|
|
88
|
+
this._resizeDebounceHandle = null;
|
|
89
|
+
}
|
|
99
90
|
if (this._canvas) {
|
|
100
91
|
this._container.removeChild(this._canvas);
|
|
101
92
|
this._canvas = null;
|
|
102
93
|
}
|
|
103
94
|
this._disposed = true;
|
|
104
95
|
}
|
|
96
|
+
_scheduleResizeUpdate() {
|
|
97
|
+
if (this._disposed || !this._canvas || !this._rawAnimation || this._animationController === null) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
if (this._resizeDebounceHandle !== null) {
|
|
101
|
+
clearTimeout(this._resizeDebounceHandle);
|
|
102
|
+
}
|
|
103
|
+
this._resizeDebounceHandle = window.setTimeout(() => {
|
|
104
|
+
this._resizeDebounceHandle = null;
|
|
105
|
+
if (this._disposed || !this._canvas || !this._rawAnimation || this._animationController === null) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const newScale = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._container);
|
|
109
|
+
if (this._scaleFactor !== newScale) {
|
|
110
|
+
this._scaleFactor = newScale;
|
|
111
|
+
this._canvas.style.width = `${this._rawAnimation.w * newScale}px`;
|
|
112
|
+
this._canvas.style.height = `${this._rawAnimation.h * newScale}px`;
|
|
113
|
+
this._animationController.setScale(newScale);
|
|
114
|
+
}
|
|
115
|
+
}, this._resizeDebounceMs);
|
|
116
|
+
}
|
|
105
117
|
}
|
|
106
118
|
//# sourceMappingURL=localPlayer.js.map
|
package/localPlayer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localPlayer.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"localPlayer.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/player.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ export declare class Player {
|
|
|
19
19
|
private _animationHeight;
|
|
20
20
|
private _scaleFactor;
|
|
21
21
|
private _resizeObserver;
|
|
22
|
+
private _resizeDebounceHandle;
|
|
23
|
+
private _resizeDebounceMs;
|
|
22
24
|
/**
|
|
23
25
|
* Creates a new instance of the LottiePlayer.
|
|
24
26
|
* @param container The HTMLDivElement to create the canvas in and render the animation on.
|
|
@@ -38,7 +40,7 @@ export declare class Player {
|
|
|
38
40
|
*/
|
|
39
41
|
dispose(): void;
|
|
40
42
|
private _createPlayerAndStartAnimation;
|
|
41
|
-
private _onWindowResize;
|
|
42
43
|
private _onBeforeUnload;
|
|
44
|
+
private _scheduleResizeUpdate;
|
|
43
45
|
}
|
|
44
46
|
//# sourceMappingURL=player.d.ts.map
|
package/player.d.ts.map
CHANGED
|
@@ -1 +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;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAI7D;;;;GAIG;AACH,qBAAa,MAAM;IACf,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA8B;IAC/D,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,CAAqC;IACpD,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,eAAe,CAAkC;
|
|
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;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAI7D;;;;GAIG;AACH,qBAAa,MAAM;IACf,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA8B;IAC/D,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,CAAqC;IACpD,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,qBAAqB,CAAuB;IACpD,OAAO,CAAC,iBAAiB,CAAqB;IAE9C;;;;;;OAMG;gBAEC,SAAS,EAAE,cAAc,EACzB,eAAe,EAAE,MAAM,GAAG,kBAAkB,EAC5C,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;IAuD/B;;OAEG;IACI,OAAO,IAAI,IAAI;IAuBtB,OAAO,CAAC,8BAA8B;IA+CtC,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,qBAAqB;CAkChC"}
|
package/player.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CalculateScaleFactor } from "./rendering/
|
|
1
|
+
import { CalculateScaleFactor } from "./rendering/calculateScaleFactor.js";
|
|
2
2
|
import { BlobWorkerWrapper as Worker } from "./blobWorkerWrapper.js";
|
|
3
3
|
/**
|
|
4
4
|
* Allows you to play Lottie animations using Babylon.js.
|
|
@@ -22,14 +22,8 @@ export class Player {
|
|
|
22
22
|
this._animationHeight = 0;
|
|
23
23
|
this._scaleFactor = 1;
|
|
24
24
|
this._resizeObserver = null;
|
|
25
|
-
this.
|
|
26
|
-
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
const w = this._canvas.clientWidth;
|
|
30
|
-
const h = this._canvas.clientHeight;
|
|
31
|
-
this._worker.postMessage({ width: w, height: h });
|
|
32
|
-
};
|
|
25
|
+
this._resizeDebounceHandle = null;
|
|
26
|
+
this._resizeDebounceMs = 1000 / 60; // Debounce resize updates to approximately 60 FPS
|
|
33
27
|
this._onBeforeUnload = () => {
|
|
34
28
|
this._worker?.terminate();
|
|
35
29
|
this._worker = null;
|
|
@@ -80,24 +74,10 @@ export class Player {
|
|
|
80
74
|
// We have the raw animation data already on this thread
|
|
81
75
|
this._createPlayerAndStartAnimation(this._animationSource);
|
|
82
76
|
}
|
|
83
|
-
window.addEventListener("resize", this._onWindowResize);
|
|
84
77
|
window.addEventListener("beforeunload", this._onBeforeUnload);
|
|
85
78
|
if ("ResizeObserver" in window) {
|
|
86
79
|
this._resizeObserver = new ResizeObserver(() => {
|
|
87
|
-
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
91
|
-
this._scaleFactor = CalculateScaleFactor(this._animationWidth, this._animationHeight, this._container);
|
|
92
|
-
this._canvas.style.width = `${this._animationWidth * this._scaleFactor}px`;
|
|
93
|
-
this._canvas.style.height = `${this._animationHeight * this._scaleFactor}px`;
|
|
94
|
-
const containerResizeMessage = {
|
|
95
|
-
type: "containerResize",
|
|
96
|
-
payload: {
|
|
97
|
-
scaleFactor: this._scaleFactor,
|
|
98
|
-
},
|
|
99
|
-
};
|
|
100
|
-
this._worker.postMessage(containerResizeMessage);
|
|
80
|
+
this._scheduleResizeUpdate();
|
|
101
81
|
});
|
|
102
82
|
this._resizeObserver.observe(this._container);
|
|
103
83
|
}
|
|
@@ -111,12 +91,15 @@ export class Player {
|
|
|
111
91
|
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
112
92
|
*/
|
|
113
93
|
dispose() {
|
|
114
|
-
window.removeEventListener("resize", this._onWindowResize);
|
|
115
94
|
window.removeEventListener("beforeunload", this._onBeforeUnload);
|
|
116
95
|
if (this._resizeObserver) {
|
|
117
96
|
this._resizeObserver.disconnect();
|
|
118
97
|
this._resizeObserver = null;
|
|
119
98
|
}
|
|
99
|
+
if (this._resizeDebounceHandle !== null) {
|
|
100
|
+
clearTimeout(this._resizeDebounceHandle);
|
|
101
|
+
this._resizeDebounceHandle = null;
|
|
102
|
+
}
|
|
120
103
|
this._onBeforeUnload();
|
|
121
104
|
if (this._canvas) {
|
|
122
105
|
this._container.removeChild(this._canvas);
|
|
@@ -138,6 +121,7 @@ export class Player {
|
|
|
138
121
|
}
|
|
139
122
|
// Create the canvas element
|
|
140
123
|
this._canvas = document.createElement("canvas");
|
|
124
|
+
this._canvas.id = "babylon-canvas";
|
|
141
125
|
// Center the canvas in the container
|
|
142
126
|
this._canvas.style.position = "absolute";
|
|
143
127
|
this._canvas.style.left = "50%";
|
|
@@ -163,6 +147,34 @@ export class Player {
|
|
|
163
147
|
};
|
|
164
148
|
this._worker.postMessage(startAnimationMessage, [offscreen]);
|
|
165
149
|
}
|
|
150
|
+
_scheduleResizeUpdate() {
|
|
151
|
+
if (this._disposed || !this._canvas || !this._worker) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
if (this._animationWidth === 0 || this._animationHeight === 0) {
|
|
155
|
+
return; // Not initialized yet
|
|
156
|
+
}
|
|
157
|
+
if (this._resizeDebounceHandle !== null) {
|
|
158
|
+
clearTimeout(this._resizeDebounceHandle);
|
|
159
|
+
}
|
|
160
|
+
this._resizeDebounceHandle = window.setTimeout(() => {
|
|
161
|
+
this._resizeDebounceHandle = null;
|
|
162
|
+
if (this._disposed || !this._canvas || !this._worker) {
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
const newScale = CalculateScaleFactor(this._animationWidth, this._animationHeight, this._container);
|
|
166
|
+
if (this._scaleFactor !== newScale) {
|
|
167
|
+
this._scaleFactor = newScale;
|
|
168
|
+
this._canvas.style.width = `${this._animationWidth * newScale}px`;
|
|
169
|
+
this._canvas.style.height = `${this._animationHeight * newScale}px`;
|
|
170
|
+
const containerResizeMessage = {
|
|
171
|
+
type: "containerResize",
|
|
172
|
+
payload: { scaleFactor: newScale },
|
|
173
|
+
};
|
|
174
|
+
this._worker.postMessage(containerResizeMessage);
|
|
175
|
+
}
|
|
176
|
+
}, this._resizeDebounceMs);
|
|
177
|
+
}
|
|
166
178
|
}
|
|
167
179
|
function IsRawLottieAnimation(x) {
|
|
168
180
|
const o = x;
|
package/player.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"player.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"player.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,14 +3,6 @@ import "@babylonjs/core/Shaders/sprites.vertex.js";
|
|
|
3
3
|
import "@babylonjs/core/Shaders/sprites.fragment.js";
|
|
4
4
|
import type { RawLottieAnimation } from "../parsing/rawTypes.js";
|
|
5
5
|
import type { AnimationConfiguration } from "../animationConfiguration.js";
|
|
6
|
-
/**
|
|
7
|
-
* Calculates the scale factor between a container and the animation it is playing
|
|
8
|
-
* @param animationWidth Width of the animaiton
|
|
9
|
-
* @param animationHeight Height of the animation
|
|
10
|
-
* @param container The container where the animation is getting played
|
|
11
|
-
* @returns The scale factor that will modify the size of the animation rendering to adjust to the container
|
|
12
|
-
*/
|
|
13
|
-
export declare function CalculateScaleFactor(animationWidth: number | undefined, animationHeight: number | undefined, container: HTMLElement): number;
|
|
14
6
|
/**
|
|
15
7
|
* Class that controls the playing of lottie animations using Babylon.js
|
|
16
8
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animationController.d.ts","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/rendering/animationController.ts"],"names":[],"mappings":"AAAA,4DAA8C;AAC9C,mDAAqC;AACrC,qDAAuC;AAOvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAS9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAOxE
|
|
1
|
+
{"version":3,"file":"animationController.d.ts","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/rendering/animationController.ts"],"names":[],"mappings":"AAAA,4DAA8C;AAC9C,mDAAqC;AACrC,qDAAuC;AAOvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAS9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAOxE;;GAEG;AACH,qBAAa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAC9D,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAyB;IACxD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAa;IACrC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAE7C,OAAO,CAAC,UAAU,CAAC,CAAgB;IAEnC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAW;IACrC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAa;IAC/C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAa;IAE1C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,KAAK,CAAU;IAEvB,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAmB;IAErD;;;OAGG;IACH,IAAW,IAAI,IAAI,iBAAiB,CAEnC;IAED;;;OAGG;IACH,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED;;;OAGG;IACH,IAAW,cAAc,IAAI,MAAM,CAElC;IAED;;;;;;;OAOG;gBAEC,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAC3C,aAAa,EAAE,kBAAkB,EACjC,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,aAAa,EAAE,sBAAsB;IAiEzC;;OAEG;IACI,aAAa,IAAI,IAAI;IAe5B;;OAEG;IACI,aAAa,IAAI,IAAI;IAU5B;;;OAGG;IACI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASpC;;OAEG;IACI,OAAO,IAAI,IAAI;IAQtB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,OAAO;CAgDlB"}
|
|
@@ -11,22 +11,6 @@ import { ThinMatrix } from "../maths/matrix.js";
|
|
|
11
11
|
* Defines the babylon combine alpha value to prevent a large import.
|
|
12
12
|
*/
|
|
13
13
|
const AlphaCombine = 2;
|
|
14
|
-
/**
|
|
15
|
-
* Calculates the scale factor between a container and the animation it is playing
|
|
16
|
-
* @param animationWidth Width of the animaiton
|
|
17
|
-
* @param animationHeight Height of the animation
|
|
18
|
-
* @param container The container where the animation is getting played
|
|
19
|
-
* @returns The scale factor that will modify the size of the animation rendering to adjust to the container
|
|
20
|
-
*/
|
|
21
|
-
export function CalculateScaleFactor(animationWidth, animationHeight, container) {
|
|
22
|
-
if (animationWidth === undefined || animationHeight === undefined) {
|
|
23
|
-
return 1;
|
|
24
|
-
}
|
|
25
|
-
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
26
|
-
const horizontalScale = container.clientWidth / animationWidth;
|
|
27
|
-
const verticalScale = container.clientHeight / animationHeight;
|
|
28
|
-
return Math.min(verticalScale, horizontalScale);
|
|
29
|
-
}
|
|
30
14
|
/**
|
|
31
15
|
* Class that controls the playing of lottie animations using Babylon.js
|
|
32
16
|
*/
|
|
@@ -171,6 +155,12 @@ export class AnimationController {
|
|
|
171
155
|
const world = _worldMatrix.asArray();
|
|
172
156
|
world[5] = -1; // we are upside down with Lottie
|
|
173
157
|
_projectionMatrix.orthoOffCenterLeftHanded(0, _engine.getRenderWidth() / (devicePixelRatio * scale), _engine.getRenderHeight() / (devicePixelRatio * scale), 0, -100, 100);
|
|
158
|
+
// If we are not playing anymore (animation finished), resizing clears the buffer.
|
|
159
|
+
// Redraw the last frame so the canvas does not appear blank after a resize.
|
|
160
|
+
if (!this._isPlaying && this._animation) {
|
|
161
|
+
this._engine.setViewport(this._viewport);
|
|
162
|
+
this._renderingManager.render(this._worldMatrix, this._projectionMatrix);
|
|
163
|
+
}
|
|
174
164
|
}
|
|
175
165
|
_isHtmlCanvas(canvas) {
|
|
176
166
|
return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
|
|
@@ -224,6 +214,7 @@ export class AnimationController {
|
|
|
224
214
|
if (this._currentFrame < this._animation.startFrame) {
|
|
225
215
|
return;
|
|
226
216
|
}
|
|
217
|
+
let stoppingAfterThisFrame = false;
|
|
227
218
|
if (this._currentFrame > this._animation.endFrame) {
|
|
228
219
|
if (this._loop) {
|
|
229
220
|
this._currentFrame = (this._currentFrame % (this._animation.endFrame - this._animation.startFrame)) + this._animation.startFrame;
|
|
@@ -232,8 +223,9 @@ export class AnimationController {
|
|
|
232
223
|
}
|
|
233
224
|
}
|
|
234
225
|
else {
|
|
235
|
-
|
|
236
|
-
|
|
226
|
+
// When not looping, clamp to the last frame of the animation
|
|
227
|
+
this._currentFrame = this._animation.endFrame;
|
|
228
|
+
stoppingAfterThisFrame = true;
|
|
237
229
|
}
|
|
238
230
|
}
|
|
239
231
|
for (let i = 0; i < this._animation.nodes.length; i++) {
|
|
@@ -241,6 +233,9 @@ export class AnimationController {
|
|
|
241
233
|
}
|
|
242
234
|
// Render all layers of the animation
|
|
243
235
|
this._renderingManager.render(this._worldMatrix, this._projectionMatrix);
|
|
236
|
+
if (stoppingAfterThisFrame) {
|
|
237
|
+
this._isPlaying = false;
|
|
238
|
+
}
|
|
244
239
|
}
|
|
245
240
|
}
|
|
246
241
|
//# sourceMappingURL=animationController.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animationController.js","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/rendering/animationController.ts"],"names":[],"mappings":"AAAA,4DAA8C;AAC9C,mDAAqC;AACrC,qDAAuC;AAEvC,OAAO,EAAE,UAAU,EAAE,8CAAgC;AACrD,OAAO,EAAE,QAAQ,EAAE,+CAAiC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAM7C;;GAEG;AACH,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB
|
|
1
|
+
{"version":3,"file":"animationController.js","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/rendering/animationController.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the scale factor between a container and the animation it is playing
|
|
3
|
+
* @param animationWidth Width of the animaiton
|
|
4
|
+
* @param animationHeight Height of the animation
|
|
5
|
+
* @param container The container where the animation is getting played
|
|
6
|
+
* @returns The scale factor that will modify the size of the animation rendering to adjust to the container
|
|
7
|
+
*/
|
|
8
|
+
export declare function CalculateScaleFactor(animationWidth: number | undefined, animationHeight: number | undefined, container: HTMLElement): number;
|
|
9
|
+
//# sourceMappingURL=calculateScaleFactor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculateScaleFactor.d.ts","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/rendering/calculateScaleFactor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,EAAE,eAAe,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,EAAE,WAAW,GAAG,MAAM,CAS5I"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the scale factor between a container and the animation it is playing
|
|
3
|
+
* @param animationWidth Width of the animaiton
|
|
4
|
+
* @param animationHeight Height of the animation
|
|
5
|
+
* @param container The container where the animation is getting played
|
|
6
|
+
* @returns The scale factor that will modify the size of the animation rendering to adjust to the container
|
|
7
|
+
*/
|
|
8
|
+
export function CalculateScaleFactor(animationWidth, animationHeight, container) {
|
|
9
|
+
if (animationWidth === undefined || animationHeight === undefined) {
|
|
10
|
+
return 1;
|
|
11
|
+
}
|
|
12
|
+
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
13
|
+
const horizontalScale = container.clientWidth / animationWidth;
|
|
14
|
+
const verticalScale = container.clientHeight / animationHeight;
|
|
15
|
+
return Math.min(verticalScale, horizontalScale);
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=calculateScaleFactor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calculateScaleFactor.js","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/rendering/calculateScaleFactor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,oBAAoB,CAAC,cAAkC,EAAE,eAAmC,EAAE,SAAsB;IAChI,IAAI,cAAc,KAAK,SAAS,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAChE,OAAO,CAAC,CAAC;IACb,CAAC;IAED,6GAA6G;IAC7G,MAAM,eAAe,GAAG,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;IAC/D,MAAM,aAAa,GAAG,SAAS,CAAC,YAAY,GAAG,eAAe,CAAC;IAC/D,OAAO,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AACpD,CAAC"}
|