feat: 🎸 freeze & unfreeze methods

LottieFiles · Nov 28, 2023 · 385e3c8 · 385e3c8
1 parent 82c01b6
commit 385e3c8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
@@ -45,6 +45,11 @@ app.innerHTML = `
       <label for="loopToggle">Loop: </label>
       <input type="checkbox" id="loopToggle" checked />
     </div>
+
+    <div>
+      <button id="freeze" class="control-button">Freeze</button>
+      <button id="unfreeze" class="control-button">Unfreeze</button>
+    </div>
     
     <label for="frameSlider">Frame: <span id="current-frame">0</span></label>
     <input type="range" id="frameSlider" min="0" step="0.1" />
@@ -128,6 +133,16 @@ fetch('/hamster.lottie')
     const startFrameInput = document.getElementById('startFrame') as HTMLInputElement;
     const endFrameInput = document.getElementById('endFrame') as HTMLInputElement;
     const setSegmentsButton = document.getElementById('setSegments') as HTMLButtonElement;
+    const freezeButton = document.getElementById('freeze') as HTMLButtonElement;
+    const unfreezeButton = document.getElementById('unfreeze') as HTMLButtonElement;
+
+    freezeButton.addEventListener('click', () => {
+      dotLottie.freeze();
+    });
+
+    unfreezeButton.addEventListener('click', () => {
+      dotLottie.unfreeze();
+    });
 
     setSegmentsButton.addEventListener('click', () => {
       const startFrame = parseInt(startFrameInput.value, 10);

diff --git a/packages/web/README.md b/packages/web/README.md
@@ -173,6 +173,8 @@ The `DotLottie` constructor accepts a config object with the following propertie
 | `load(config: Config)`                                    | Loads a new configuration or a new animation.                                                                                                                     |
 | `setMode(mode: string)`                                   | Sets the animation play mode.                                                                                                                                     |
 | `setSegments(startFrame: number, endFrame: number)`       | Sets the start and end frame of the animation.                                                                                                                    |
+| `freeze()`                                                | Freezes the animation by stopping the animation loop.                                                                                                             |
+| `unfreeze()`                                              | Unfreezes the animation by resuming the animation loop.                                                                                                           |
 
 ### Static Methods
 

diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts
@@ -832,5 +832,22 @@ export class DotLottie {
     this._playbackState = 'stopped';
   }
 
+  /**
+   * Freezes the animation by stopping the animation loop.
+   *
+   */
+  public freeze(): void {
+    this._stopAnimationLoop();
+  }
+
+  /**
+   * Unfreezes the animation by resuming the animation loop.
+   *
+   */
+  public unfreeze(): void {
+    this._synchronizeAnimationTiming(this._currentFrame);
+    this._startAnimationLoop();
+  }
+
   // #endregion
 }