@babylonjs/addons 8.22.2 → 8.23.0

package/lottie/rendering/animationController.js

@@ -0,0 +1,210 @@
+import "@babylonjs/core/Engines/Extensions/engine.alpha.js";
+import "@babylonjs/core/Shaders/sprites.vertex.js";
+import "@babylonjs/core/Shaders/sprites.fragment.js";
+import { ThinEngine } from "@babylonjs/core/Engines/thinEngine.js";
+import { Viewport } from "@babylonjs/core/Maths/math.viewport.js";
+import { RenderingManager } from "./renderingManager.js";
+import { AnimationParser } from "../lottie/animationParser.js";
+import { ThinMatrix } from "../maths/matrix.js";
+import { SpritePacker } from "../sprites/spritePacker.js";
+/**
+ * Defines the babylon combine alpha value to prevent a large import.
+ */
+const AlphaCombine = 2;
+/**
+ * Class that controls the playing of lottie animations using Babylon.js
+ */
+export class AnimationController {
+    /**
+     * Gets the canvas used for rendering the animation.
+     * @returns The canvas element used for rendering.
+     */
+    get view() {
+        return this._engine.getRenderingCanvas();
+    }
+    /**
+     * Gets the height of the animation in pixels.
+     * @returns The height of the animation in pixels.
+     */
+    get animationHeight() {
+        return this._animation ? this._animation.heightPx : 0;
+    }
+    /**
+     * Gets the width of the animation in pixels.
+     * @returns The width of the animation in pixels.
+     */
+    get animationWidth() {
+        return this._animation ? this._animation.widthPx : 0;
+    }
+    /**
+     * Creates a new instance of the Player.
+     * @param canvas The canvas element to render the animation on.
+     * @param animationJson The JSON string of the Lottie animation to be played.
+     * @param configuration The configuration for the animation player.
+     */
+    constructor(canvas, animationJson, configuration) {
+        this._isReady = false;
+        this._canvas = canvas;
+        this._configuration = configuration;
+        this._currentFrame = 0;
+        this._isPlaying = false;
+        this._animationFrameId = null;
+        this._lastFrameTime = 0;
+        this._deltaTime = 0;
+        this._accumulatedTime = 0;
+        this._framesToAdvance = 0;
+        this._loop = false;
+        this._frameDuration = 1000 / 30; // Default to 30 FPS
+        this._engine = new ThinEngine(this._canvas, false, // Antialias
+        {
+            alpha: true,
+            stencil: false,
+            antialias: false,
+            audioEngine: false,
+            depth: false,
+            // Important to allow skip frame and tiled optimizations
+            preserveDrawingBuffer: false,
+            premultipliedAlpha: false,
+            doNotHandleContextLost: this._configuration.supportDeviceLost,
+            // Usefull during debug to simulate WebGL1 devices (Safari)
+            // disableWebGL2Support: true,
+        }, false);
+        // Prevent parallel shader compilation to simplify the boot sequence
+        // Only a couple of fast compile shaders.
+        this._engine.getCaps().parallelShaderCompile = undefined;
+        this._engine.depthCullingState.depthTest = false;
+        this._engine.stencilState.stencilTest = false;
+        this._engine.setAlphaMode(AlphaCombine);
+        this._spritePacker = new SpritePacker(this._engine, this._configuration);
+        this._renderingManager = new RenderingManager(this._engine, this._spritePacker.texture, this._configuration);
+        this._projectionMatrix = new ThinMatrix();
+        this._worldMatrix = new ThinMatrix();
+        this._worldMatrix.identity();
+        this._viewport = new Viewport(0, 0, 1, 1);
+        // Parse the animation
+        const parser = new AnimationParser(this._spritePacker, animationJson, this._configuration, this._renderingManager);
+        this._animation = parser.animationInfo;
+        this._frameDuration = 1000 / this._animation.frameRate;
+        this.setSize(this._animation.widthPx, this._animation.heightPx);
+        this._cleanTree(this._animation.nodes);
+        this._isReady = true;
+    }
+    /**
+     * Plays the animation.
+     * @param loop If true, the animation will loop when it reaches the end.
+     */
+    playAnimation(loop = false) {
+        if (this._animation === undefined || !this._isReady) {
+            return;
+        }
+        this._currentFrame = 0;
+        this._accumulatedTime = 0;
+        this._framesToAdvance = 0;
+        this._isPlaying = true;
+        this._loop = loop;
+        this._lastFrameTime = 0;
+        // Start the render loop
+        this._startRenderLoop();
+    }
+    /**
+     * Stops the animation playback.
+     */
+    stopAnimation() {
+        this._accumulatedTime = 0;
+        this._framesToAdvance = 0;
+        this._isPlaying = false;
+        if (this._animationFrameId !== null) {
+            cancelAnimationFrame(this._animationFrameId);
+            this._animationFrameId = null;
+        }
+    }
+    /**
+     * Sets the rendering size for the engine
+     * @param width Width of the rendering canvas
+     * @param height Height of the rendering canvas
+     */
+    setSize(width, height) {
+        const { _engine, _projectionMatrix, _worldMatrix } = this;
+        const devicePixelRatio = this._configuration.devicePixelRatio;
+        _engine.setSize(width * devicePixelRatio, height * devicePixelRatio);
+        this._canvas.width = width * devicePixelRatio;
+        this._canvas.height = height * devicePixelRatio;
+        // _engine.getRenderingCanvas()!.style.width = `${width}px`;
+        // _engine.getRenderingCanvas()!.style.height = `${height}px`;
+        const world = _worldMatrix.asArray();
+        world[5] = -1; // we are upside down with Lottie
+        _projectionMatrix.orthoOffCenterLeftHanded(0, _engine.getRenderWidth() / devicePixelRatio, _engine.getRenderHeight() / devicePixelRatio, 0, -100, 100);
+    }
+    /**
+     * Disposes the player and releases all resources.
+     */
+    dispose() {
+        this.stopAnimation();
+        this._engine.getRenderingCanvas()?.remove();
+        this._engine.dispose();
+        this._renderingManager.dispose();
+        this._spritePacker.texture.dispose();
+    }
+    _cleanTree(nodes) {
+        // Remove non shape nodes
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.children.length === 0 && !node.isShape) {
+                nodes.splice(i, 1);
+                i--;
+                continue;
+            }
+            this._cleanTree(node.children);
+        }
+    }
+    _startRenderLoop() {
+        if (!this._isPlaying) {
+            return;
+        }
+        this._animationFrameId = requestAnimationFrame((currentTime) => {
+            this._deltaTime = currentTime - this._lastFrameTime;
+            this._lastFrameTime = currentTime;
+            this._render();
+            this._lastFrameTime = performance.now();
+            // Continue the loop if still playing
+            if (this._isPlaying) {
+                this._startRenderLoop();
+            }
+        });
+    }
+    _render() {
+        if (!this._animation || !this._isPlaying) {
+            return;
+        }
+        this._engine.setViewport(this._viewport);
+        // Calculate the new frame based on time
+        this._accumulatedTime += this._deltaTime;
+        this._framesToAdvance = Math.floor(this._accumulatedTime / this._frameDuration);
+        if (this._framesToAdvance <= 0) {
+            return;
+        }
+        this._accumulatedTime -= this._framesToAdvance * this._frameDuration;
+        this._currentFrame += this._framesToAdvance;
+        if (this._currentFrame < this._animation.startFrame) {
+            return;
+        }
+        if (this._currentFrame > this._animation.endFrame) {
+            if (this._loop) {
+                this._currentFrame = (this._currentFrame % (this._animation.endFrame - this._animation.startFrame)) + this._animation.startFrame;
+                for (let i = 0; i < this._animation.nodes.length; i++) {
+                    this._animation.nodes[i].reset();
+                }
+            }
+            else {
+                this._isPlaying = false;
+                return;
+            }
+        }
+        for (let i = 0; i < this._animation.nodes.length; i++) {
+            this._animation.nodes[i].update(this._currentFrame);
+        }
+        // Render all layers of the animation
+        this._renderingManager.render(this._worldMatrix, this._projectionMatrix);
+    }
+}
+//# sourceMappingURL=animationController.js.map

package/lottie/rendering/animationController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationController.js","sourceRoot":"","sources":["../../../../../dev/addons/src/lottie/rendering/animationController.ts"],"names":[],"mappings":"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","sourcesContent":["import \"core/Engines/Extensions/engine.alpha\";\r\nimport \"core/Shaders/sprites.vertex\";\r\nimport \"core/Shaders/sprites.fragment\";\r\n\r\nimport { ThinEngine } from \"core/Engines/thinEngine\";\r\nimport { Viewport } from \"core/Maths/math.viewport\";\r\n\r\nimport type { Node } from \"./node\";\r\nimport { RenderingManager } from \"./renderingManager\";\r\n\r\nimport type { AnimationInfo } from \"../lottie/parsedTypes\";\r\nimport { AnimationParser } from \"../lottie/animationParser\";\r\n\r\nimport { ThinMatrix } from \"../maths/matrix\";\r\n\r\nimport { SpritePacker } from \"../sprites/spritePacker\";\r\n\r\nimport type { AnimationConfiguration } from \"../lottiePlayer\";\r\n\r\n/**\r\n * Defines the babylon combine alpha value to prevent a large import.\r\n */\r\nconst AlphaCombine = 2;\r\n\r\n/**\r\n * Class that controls the playing of lottie animations using Babylon.js\r\n */\r\nexport class AnimationController {\r\n    private _isReady: boolean;\r\n\r\n    private readonly _canvas: HTMLCanvasElement;\r\n    private readonly _configuration: AnimationConfiguration;\r\n    private readonly _engine: ThinEngine;\r\n    private readonly _spritePacker: SpritePacker;\r\n\r\n    private _animation?: AnimationInfo;\r\n\r\n    private readonly _viewport: Viewport;\r\n    private readonly _projectionMatrix: ThinMatrix;\r\n    private readonly _worldMatrix: ThinMatrix;\r\n\r\n    private _frameDuration: number;\r\n    private _currentFrame: number;\r\n    private _isPlaying: boolean;\r\n    private _animationFrameId: number | null;\r\n    private _lastFrameTime: number;\r\n    private _deltaTime: number;\r\n    private _loop: boolean;\r\n\r\n    private _accumulatedTime: number;\r\n    private _framesToAdvance: number;\r\n\r\n    private readonly _renderingManager: RenderingManager;\r\n\r\n    /**\r\n     * Gets the canvas used for rendering the animation.\r\n     * @returns The canvas element used for rendering.\r\n     */\r\n    public get view(): HTMLCanvasElement {\r\n        return this._engine.getRenderingCanvas()!;\r\n    }\r\n\r\n    /**\r\n     * Gets the height of the animation in pixels.\r\n     * @returns The height of the animation in pixels.\r\n     */\r\n    public get animationHeight(): number {\r\n        return this._animation ? this._animation.heightPx : 0;\r\n    }\r\n\r\n    /**\r\n     * Gets the width of the animation in pixels.\r\n     * @returns The width of the animation in pixels.\r\n     */\r\n    public get animationWidth(): number {\r\n        return this._animation ? this._animation.widthPx : 0;\r\n    }\r\n\r\n    /**\r\n     * Creates a new instance of the Player.\r\n     * @param canvas The canvas element to render the animation on.\r\n     * @param animationJson The JSON string of the Lottie animation to be played.\r\n     * @param configuration The configuration for the animation player.\r\n     */\r\n    public constructor(canvas: HTMLCanvasElement, animationJson: string, configuration: AnimationConfiguration) {\r\n        this._isReady = false;\r\n        this._canvas = canvas;\r\n        this._configuration = configuration;\r\n        this._currentFrame = 0;\r\n        this._isPlaying = false;\r\n        this._animationFrameId = null;\r\n        this._lastFrameTime = 0;\r\n        this._deltaTime = 0;\r\n        this._accumulatedTime = 0;\r\n        this._framesToAdvance = 0;\r\n        this._loop = false;\r\n        this._frameDuration = 1000 / 30; // Default to 30 FPS\r\n\r\n        this._engine = new ThinEngine(\r\n            this._canvas,\r\n            false, // Antialias\r\n            {\r\n                alpha: true,\r\n                stencil: false,\r\n                antialias: false,\r\n                audioEngine: false,\r\n                depth: false,\r\n                // Important to allow skip frame and tiled optimizations\r\n                preserveDrawingBuffer: false,\r\n                premultipliedAlpha: false,\r\n                doNotHandleContextLost: this._configuration.supportDeviceLost,\r\n                // Usefull during debug to simulate WebGL1 devices (Safari)\r\n                // disableWebGL2Support: true,\r\n            },\r\n            false\r\n        );\r\n\r\n        // Prevent parallel shader compilation to simplify the boot sequence\r\n        // Only a couple of fast compile shaders.\r\n        this._engine.getCaps().parallelShaderCompile = undefined;\r\n        this._engine.depthCullingState.depthTest = false;\r\n        this._engine.stencilState.stencilTest = false;\r\n        this._engine.setAlphaMode(AlphaCombine);\r\n\r\n        this._spritePacker = new SpritePacker(this._engine, this._configuration);\r\n        this._renderingManager = new RenderingManager(this._engine, this._spritePacker.texture, this._configuration);\r\n\r\n        this._projectionMatrix = new ThinMatrix();\r\n        this._worldMatrix = new ThinMatrix();\r\n        this._worldMatrix.identity();\r\n\r\n        this._viewport = new Viewport(0, 0, 1, 1);\r\n\r\n        // Parse the animation\r\n        const parser = new AnimationParser(this._spritePacker, animationJson, this._configuration, this._renderingManager);\r\n        this._animation = parser.animationInfo;\r\n        this._frameDuration = 1000 / this._animation.frameRate;\r\n\r\n        this.setSize(this._animation.widthPx, this._animation.heightPx);\r\n        this._cleanTree(this._animation.nodes);\r\n\r\n        this._isReady = true;\r\n    }\r\n\r\n    /**\r\n     * Plays the animation.\r\n     * @param loop If true, the animation will loop when it reaches the end.\r\n     */\r\n    public playAnimation(loop: boolean = false): void {\r\n        if (this._animation === undefined || !this._isReady) {\r\n            return;\r\n        }\r\n\r\n        this._currentFrame = 0;\r\n        this._accumulatedTime = 0;\r\n        this._framesToAdvance = 0;\r\n        this._isPlaying = true;\r\n        this._loop = loop;\r\n        this._lastFrameTime = 0;\r\n\r\n        // Start the render loop\r\n        this._startRenderLoop();\r\n    }\r\n\r\n    /**\r\n     * Stops the animation playback.\r\n     */\r\n    public stopAnimation(): void {\r\n        this._accumulatedTime = 0;\r\n        this._framesToAdvance = 0;\r\n        this._isPlaying = false;\r\n        if (this._animationFrameId !== null) {\r\n            cancelAnimationFrame(this._animationFrameId);\r\n            this._animationFrameId = null;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Sets the rendering size for the engine\r\n     * @param width Width of the rendering canvas\r\n     * @param height Height of the rendering canvas\r\n     */\r\n    public setSize(width: number, height: number): void {\r\n        const { _engine, _projectionMatrix, _worldMatrix } = this;\r\n        const devicePixelRatio = this._configuration.devicePixelRatio;\r\n\r\n        _engine.setSize(width * devicePixelRatio, height * devicePixelRatio);\r\n        this._canvas.width = width * devicePixelRatio;\r\n        this._canvas.height = height * devicePixelRatio;\r\n        // _engine.getRenderingCanvas()!.style.width = `${width}px`;\r\n        // _engine.getRenderingCanvas()!.style.height = `${height}px`;\r\n\r\n        const world = _worldMatrix.asArray();\r\n        world[5] = -1; // we are upside down with Lottie\r\n\r\n        _projectionMatrix.orthoOffCenterLeftHanded(0, _engine.getRenderWidth() / devicePixelRatio, _engine.getRenderHeight() / devicePixelRatio, 0, -100, 100);\r\n    }\r\n\r\n    /**\r\n     * Disposes the player and releases all resources.\r\n     */\r\n    public dispose(): void {\r\n        this.stopAnimation();\r\n        this._engine.getRenderingCanvas()?.remove();\r\n        this._engine.dispose();\r\n        this._renderingManager.dispose();\r\n        this._spritePacker.texture.dispose();\r\n    }\r\n\r\n    private _cleanTree(nodes: Node[]): void {\r\n        // Remove non shape nodes\r\n        for (let i = 0; i < nodes.length; i++) {\r\n            const node = nodes[i];\r\n            if (node.children.length === 0 && !node.isShape) {\r\n                nodes.splice(i, 1);\r\n                i--;\r\n                continue;\r\n            }\r\n\r\n            this._cleanTree(node.children);\r\n        }\r\n    }\r\n\r\n    private _startRenderLoop(): void {\r\n        if (!this._isPlaying) {\r\n            return;\r\n        }\r\n\r\n        this._animationFrameId = requestAnimationFrame((currentTime) => {\r\n            this._deltaTime = currentTime - this._lastFrameTime;\r\n            this._lastFrameTime = currentTime;\r\n\r\n            this._render();\r\n            this._lastFrameTime = performance.now();\r\n\r\n            // Continue the loop if still playing\r\n            if (this._isPlaying) {\r\n                this._startRenderLoop();\r\n            }\r\n        });\r\n    }\r\n\r\n    private _render(): void {\r\n        if (!this._animation || !this._isPlaying) {\r\n            return;\r\n        }\r\n\r\n        this._engine.setViewport(this._viewport);\r\n\r\n        // Calculate the new frame based on time\r\n        this._accumulatedTime += this._deltaTime;\r\n        this._framesToAdvance = Math.floor(this._accumulatedTime / this._frameDuration);\r\n\r\n        if (this._framesToAdvance <= 0) {\r\n            return;\r\n        }\r\n\r\n        this._accumulatedTime -= this._framesToAdvance * this._frameDuration;\r\n\r\n        this._currentFrame += this._framesToAdvance;\r\n\r\n        if (this._currentFrame < this._animation.startFrame) {\r\n            return;\r\n        }\r\n\r\n        if (this._currentFrame > this._animation.endFrame) {\r\n            if (this._loop) {\r\n                this._currentFrame = (this._currentFrame % (this._animation.endFrame - this._animation.startFrame)) + this._animation.startFrame;\r\n                for (let i = 0; i < this._animation.nodes.length; i++) {\r\n                    this._animation.nodes[i].reset();\r\n                }\r\n            } else {\r\n                this._isPlaying = false;\r\n                return;\r\n            }\r\n        }\r\n\r\n        for (let i = 0; i < this._animation.nodes.length; i++) {\r\n            this._animation.nodes[i].update(this._currentFrame);\r\n        }\r\n\r\n        // Render all layers of the animation\r\n        this._renderingManager.render(this._worldMatrix, this._projectionMatrix);\r\n    }\r\n}\r\n"]}

package/lottie/rendering/controlNode.d.ts

@@ -0,0 +1,32 @@
+import type { ScalarProperty, Vector2Property } from "../lottie/parsedTypes.js";
+import { Node } from "./node.js";
+/**
+ * This represents a top node of the scenegraph in a Lottie animation.
+ * Each top level layer in Lottie is represented by a control node node.
+ */
+export declare class ControlNode extends Node {
+    private _inFrame;
+    private _outFrame;
+    /**
+     * Constructs a new control node.
+     * @param id Unique identifier for the node.
+     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
+     * @param inFrame Frame at which the node becomes active.
+     * @param outFrame Frame at which the node becomes inactive.
+     * @param position Position of the node in the scene.
+     * @param rotation Rotation of the node in degrees.
+     * @param scale Scale of the node in the scene.
+     * @param opacity Opacity of the node, from 0 to 1.
+     * @param parent Parent node in the scenegraph.
+     */
+    constructor(id: string, ignoreOpacityAnimations: boolean, inFrame: number, outFrame: number, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
+    /**
+     * Updates the node's properties based on the current frame of the animation.
+     * This node will only be updated if the current frame is within the in and out range.
+     * @param frame Frame number we are playing in the animation.
+     * @param isParentUpdated Whether the parent node has been updated.
+     * @param isReset Whether the node is being reset.
+     * @returns True if the node was updated, false otherwise.
+     */
+    update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
+}

package/lottie/rendering/controlNode.js

@@ -0,0 +1,39 @@
+import { Node } from "./node.js";
+/**
+ * This represents a top node of the scenegraph in a Lottie animation.
+ * Each top level layer in Lottie is represented by a control node node.
+ */
+export class ControlNode extends Node {
+    /**
+     * Constructs a new control node.
+     * @param id Unique identifier for the node.
+     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
+     * @param inFrame Frame at which the node becomes active.
+     * @param outFrame Frame at which the node becomes inactive.
+     * @param position Position of the node in the scene.
+     * @param rotation Rotation of the node in degrees.
+     * @param scale Scale of the node in the scene.
+     * @param opacity Opacity of the node, from 0 to 1.
+     * @param parent Parent node in the scenegraph.
+     */
+    constructor(id, ignoreOpacityAnimations, inFrame, outFrame, position, rotation, scale, opacity, parent) {
+        super(id, ignoreOpacityAnimations, position, rotation, scale, opacity, parent);
+        this._inFrame = inFrame;
+        this._outFrame = outFrame;
+        this._isControl = true;
+    }
+    /**
+     * Updates the node's properties based on the current frame of the animation.
+     * This node will only be updated if the current frame is within the in and out range.
+     * @param frame Frame number we are playing in the animation.
+     * @param isParentUpdated Whether the parent node has been updated.
+     * @param isReset Whether the node is being reset.
+     * @returns True if the node was updated, false otherwise.
+     */
+    update(frame, isParentUpdated = false, isReset = false) {
+        // Only update if the frame is within the in and out range
+        this.isVisible = frame >= this._inFrame && frame <= this._outFrame - 1;
+        return super.update(frame, isParentUpdated, isReset);
+    }
+}
+//# sourceMappingURL=controlNode.js.map

package/lottie/rendering/controlNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlNode.js","sourceRoot":"","sources":["../../../../../dev/addons/src/lottie/rendering/controlNode.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IAIjC;;;;;;;;;;;OAWG;IACH,YACI,EAAU,EACV,uBAAgC,EAChC,OAAe,EACf,QAAgB,EAChB,QAA0B,EAC1B,QAAyB,EACzB,KAAuB,EACvB,OAAwB,EACxB,MAAa;QAEb,KAAK,CAAC,EAAE,EAAE,uBAAuB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;QAC/E,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED;;;;;;;OAOG;IACa,MAAM,CAAC,KAAa,EAAE,eAAe,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK;QAC1E,0DAA0D;QAC1D,IAAI,CAAC,SAAS,GAAG,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACvE,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;CACJ","sourcesContent":["import type { ScalarProperty, Vector2Property } from \"../lottie/parsedTypes\";\r\nimport { Node } from \"./node\";\r\n\r\n/**\r\n * This represents a top node of the scenegraph in a Lottie animation.\r\n * Each top level layer in Lottie is represented by a control node node.\r\n */\r\nexport class ControlNode extends Node {\r\n    private _inFrame: number;\r\n    private _outFrame: number;\r\n\r\n    /**\r\n     * Constructs a new control node.\r\n     * @param id Unique identifier for the node.\r\n     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.\r\n     * @param inFrame Frame at which the node becomes active.\r\n     * @param outFrame Frame at which the node becomes inactive.\r\n     * @param position Position of the node in the scene.\r\n     * @param rotation Rotation of the node in degrees.\r\n     * @param scale Scale of the node in the scene.\r\n     * @param opacity Opacity of the node, from 0 to 1.\r\n     * @param parent Parent node in the scenegraph.\r\n     */\r\n    public constructor(\r\n        id: string,\r\n        ignoreOpacityAnimations: boolean,\r\n        inFrame: number,\r\n        outFrame: number,\r\n        position?: Vector2Property,\r\n        rotation?: ScalarProperty,\r\n        scale?: Vector2Property,\r\n        opacity?: ScalarProperty,\r\n        parent?: Node\r\n    ) {\r\n        super(id, ignoreOpacityAnimations, position, rotation, scale, opacity, parent);\r\n        this._inFrame = inFrame;\r\n        this._outFrame = outFrame;\r\n\r\n        this._isControl = true;\r\n    }\r\n\r\n    /**\r\n     * Updates the node's properties based on the current frame of the animation.\r\n     * This node will only be updated if the current frame is within the in and out range.\r\n     * @param frame Frame number we are playing in the animation.\r\n     * @param isParentUpdated Whether the parent node has been updated.\r\n     * @param isReset Whether the node is being reset.\r\n     * @returns True if the node was updated, false otherwise.\r\n     */\r\n    public override update(frame: number, isParentUpdated = false, isReset = false): boolean {\r\n        // Only update if the frame is within the in and out range\r\n        this.isVisible = frame >= this._inFrame && frame <= this._outFrame - 1;\r\n        return super.update(frame, isParentUpdated, isReset);\r\n    }\r\n}\r\n"]}

package/lottie/rendering/node.d.ts

@@ -0,0 +1,97 @@
+import type { IVector2Like } from "@babylonjs/core/Maths/math.like.js";
+import type { ScalarProperty, Vector2Property } from "../lottie/parsedTypes.js";
+import { ThinMatrix } from "../maths/matrix.js";
+/**
+ * Represents a node in the scenegraph that contains the animation information from a lottie animation layer or group.
+ */
+export declare class Node {
+    private readonly _id;
+    private readonly _ignoreOpacityAnimations;
+    private readonly _position;
+    private readonly _rotation;
+    private readonly _scale;
+    private _worldMatrix;
+    private _localMatrix;
+    private _globalMatrix;
+    private readonly _opacity;
+    private readonly _parent;
+    private readonly _children;
+    private _isVisible;
+    private _isAnimated;
+    private _animationsFunctions;
+    protected _isControl: boolean;
+    protected _isShape: boolean;
+    /**
+     * Gets the id of this node.
+     * @returns The unique identifier of this node.
+     */
+    get id(): string;
+    /**
+     * Gets the childer of this node.
+     * @returns An array of child nodes.
+     */
+    get children(): Node[];
+    /**
+     * Gets whether this node is a shape.
+     * @returns True if this node is a shape, false otherwise.
+     */
+    get isShape(): boolean;
+    /**
+     * Gets the world matrix of this node.
+     * @returns The world matrix.
+     */
+    get worldMatrix(): ThinMatrix;
+    /**
+     * Gets whether this node is animated.
+     * @returns True if this node has animations, false otherwise.
+     */
+    get isAnimated(): boolean;
+    /**
+     * Gets the opacity of this node.
+     * If the node is not visible, the opacity will be 0.
+     * @returns The opacity of the node, from 0 to 1.
+     */
+    get opacity(): number;
+    /**
+     * Gets the initial scale of this node.
+     * @returns The initial scale.
+     */
+    get startScale(): IVector2Like;
+    /**
+     * Gets the parent node of this node.
+     * @returns The parent node, or undefined if this is a root node.
+     */
+    get parent(): Node | undefined;
+    /**
+     * Sets the node visibility.
+     * @param value The new visibility value.
+     */
+    set isVisible(value: boolean);
+    /**
+     * Constructs a new node.
+     * @param id Unique identifier for the node.
+     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
+     * @param position Position of the node in the scene.
+     * @param rotation Rotation of the node in degrees.
+     * @param scale Scale of the node in the scene.
+     * @param opacity Opacity of the node, from 0 to 1.
+     * @param parent Parent node in the scenegraph.
+     */
+    constructor(id: string, ignoreOpacityAnimations: boolean, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
+    /**
+     * Resets the node's properties to their initial values.
+     */
+    reset(): void;
+    /**
+     * Updates the node's properties based on the current frame of the animation.
+     * @param frame Frame number we are playing in the animation.
+     * @param isParentUpdated Whether the parent node has been updated.
+     * @param isReset Whether the node is being reset.
+     * @returns True if the node was updated, false otherwise.
+     */
+    update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
+    private _updatePosition;
+    private _updateRotation;
+    private _updateScale;
+    private _updateOpacity;
+}