feat: 🎸 add load method (#45)

* feat: 🎸 add load method * fix: 🐛 stop() doesn't stop the animation loop
LottieFiles · Nov 20, 2023 · 82830d2 · 82830d2
1 parent 600aed1
commit 82830d2
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 14 deletions.
diff --git a/.changeset/proud-trains-shop.md b/.changeset/proud-trains-shop.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 add load method
diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
@@ -45,6 +45,7 @@ app.innerHTML = `
     <label for="speed" class="speed-label">Speed: <span id="speed-value">x1</span></label>
     <input type="range" id="speed" min="0.1" max="5" step="0.1" value="1" class="speed-slider" />
     <button id="destroy" class="control-button" style="background: #cd3434;">Destroy</button>
+    <button id="reload" class="control-button">Reload</button>
   </div>
 </div>
 `;
@@ -94,13 +95,23 @@ fetch('/hamster.lottie')
     const speedSlider = document.getElementById('speed') as HTMLInputElement;
     const speedValueSpan = document.getElementById('speed-value') as HTMLSpanElement;
     const destroyButton = document.getElementById('destroy') as HTMLButtonElement;
+    const reloadButton = document.getElementById('reload') as HTMLButtonElement;
 
     destroyButton.addEventListener('click', () => {
       canvas.remove();
 
       dotLottie.destroy();
     });
 
+    reloadButton.addEventListener('click', () => {
+      dotLottie.load({
+        src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',
+        loop: true,
+        autoplay: true,
+        mode: 'bounce-reverse',
+      });
+    });
+
     playPauseButton.addEventListener('click', () => {
       if (dotLottie.playing) {
         dotLottie.pause();

diff --git a/packages/web/README.md b/packages/web/README.md
@@ -21,7 +21,7 @@
   * [Via CDN](#via-cdn)
 * [Live Example](#live-example)
 * [APIs](#apis)
-  * [Options](#options)
+  * [Config](#config)
   * [Properties](#properties)
   * [Methods](#methods)
   * [Static Methods](#static-methods)
@@ -107,20 +107,24 @@ const dotLottie = new DotLottie({
 
 ## APIs
 
-### Options
+### Config
 
-| Option     | Type                  | Required | Default   | Description                                                                                         |
-| ---------- | --------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------- |
-| `autoplay` | boolean               |          | false     | Auto-starts the animation on load.                                                                  |
-| `loop`     | boolean               |          | false     | Determines if the animation should loop.                                                            |
-| `canvas`   | HTMLCanvasElement     |    ✔️    | undefined | Canvas element for animation rendering.                                                             |
-| `src`      | string                |          | undefined | URL to the animation data (`.json` or `.lottie`).                                                   |
-| `speed`    | number                |          | 1         | Animation playback speed. 1 is regular speed.                                                       |
-| `data`     | string \| ArrayBuffer |          | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
-| `mode`     | string                |          | "normal"  | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse".                       |
+The `DotLottie` constructor accepts a config object with the following properties:
+
+| Property name | Type                  | Required | Default   | Description                                                                                         |
+| ------------- | --------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------- |
+| `autoplay`    | boolean               |          | false     | Auto-starts the animation on load.                                                                  |
+| `loop`        | boolean               |          | false     | Determines if the animation should loop.                                                            |
+| `canvas`      | HTMLCanvasElement     |    ✔️    | undefined | Canvas element for animation rendering.                                                             |
+| `src`         | string                |          | undefined | URL to the animation data (`.json` or `.lottie`).                                                   |
+| `speed`       | number                |          | 1         | Animation playback speed. 1 is regular speed.                                                       |
+| `data`        | string \| ArrayBuffer |          | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
+| `mode`        | string                |          | "normal"  | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse".                       |
 
 ### Properties
 
+`DotLottie` instances expose the following properties:
+
 | Property       | Type    | Description                                                                                 |
 | -------------- | ------- | ------------------------------------------------------------------------------------------- |
 | `currentFrame` | number  | Represents the animation's currently displayed frame number.                                |
@@ -134,6 +138,8 @@ const dotLottie = new DotLottie({
 
 ### Methods
 
+`DotLottie` instances expose the following methods that can be used to control the animation:
+
 | Method                                                    | Description                                                                                                                                                       |
 | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `play()`                                                  | Begins playback from the current animation position.                                                                                                              |
@@ -145,15 +151,20 @@ const dotLottie = new DotLottie({
 | `addEventListener(event: string, listener: Function)`     | Registers a function to respond to a specific animation event.                                                                                                    |
 | `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event.                                                                           |
 | `destroy()`                                               | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
+| `load(config: Config)`                                    | Loads a new configuration or a new animation.                                                                                                                     |
 
 ### Static Methods
 
+The `DotLottie` class exposes the following static methods:
+
 | Method                    | Description                               |
 | ------------------------- | ----------------------------------------- |
 | `setWasmUrl(url: string)` | Sets the URL to the renderer.wasm binary. |
 
 ### Events
 
+The `DotLottie` instance emits the following events that can be listened to via the `addEventListener` method:
+
 | Event       | Description                                          |
 | ----------- | ---------------------------------------------------- |
 | `load`      | Emitted when the animation is loaded.                |

diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts
@@ -4,7 +4,6 @@
 
 /* eslint-disable promise/prefer-await-to-then */
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/prefer-readonly */
 
 import type { EventListener, EventType } from './event-manager';
 import { EventManager } from './event-manager';
@@ -16,7 +15,7 @@ const MS_TO_SEC_FACTOR = 1000;
 
 export type Mode = 'normal' | 'reverse' | 'bounce' | 'bounce-reverse';
 
-export interface Options {
+export interface Config {
   /**
    * Boolean indicating if the animation should start playing automatically.
    */
@@ -84,7 +83,7 @@ export class DotLottie {
 
   private _animationFrameId?: number;
 
-  public constructor(config: Options) {
+  public constructor(config: Config) {
     this._animationLoop = this._animationLoop.bind(this);
 
     this._canvas = config.canvas;
@@ -437,6 +436,8 @@ export class DotLottie {
    * Stops the animation playback and resets the current frame.
    */
   public stop(): void {
+    this._stopAnimationLoop();
+    this._playing = false;
     this._loopCount = 0;
     this._direction = 1;
     this._currentFrame = 0;
@@ -503,6 +504,29 @@ export class DotLottie {
     });
   }
 
+  public load(config: Omit<Config, 'canvas'>): void {
+    this._playing = false;
+    this._stopAnimationLoop();
+
+    this._loop = config.loop ?? false;
+    this._speed = config.speed ?? 1;
+    this._autoplay = config.autoplay ?? false;
+    this._loopCount = 0;
+    this._currentFrame = 0;
+    this._beginTime = 0;
+    this._totalFrames = 0;
+    this._duration = 0;
+    this._bounceCount = 0;
+    this._direction = 1;
+    this._mode = config.mode ?? 'normal';
+
+    if (config.src) {
+      this._loadAnimationFromURL(config.src);
+    } else if (config.data) {
+      this._initializeAnimationFromData(config.data);
+    }
+  }
+
   /**
    * Registers an event listener for a specific event type.
    *