From 82830d2fc1f40d803c0706ee48a2d4b03268f08d Mon Sep 17 00:00:00 2001 From: Abdelrahman Ashraf Date: Mon, 20 Nov 2023 13:04:26 +0700 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20load=20method=20(#?= =?UTF-8?q?45)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 add load method * fix: 🐛 stop() doesn't stop the animation loop --- .changeset/proud-trains-shop.md | 5 ++++ apps/dotlottie-web-example/src/main.ts | 11 +++++++++ packages/web/README.md | 33 +++++++++++++++++--------- packages/web/src/dotlottie.ts | 30 ++++++++++++++++++++--- 4 files changed, 65 insertions(+), 14 deletions(-) create mode 100644 .changeset/proud-trains-shop.md diff --git a/.changeset/proud-trains-shop.md b/.changeset/proud-trains-shop.md new file mode 100644 index 00000000..8440ef43 --- /dev/null +++ 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 index 8defccaf..4f5feffd 100644 --- a/apps/dotlottie-web-example/src/main.ts +++ b/apps/dotlottie-web-example/src/main.ts @@ -45,6 +45,7 @@ app.innerHTML = ` + `; @@ -94,6 +95,7 @@ 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(); @@ -101,6 +103,15 @@ fetch('/hamster.lottie') 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 index 0ca8aafa..cda1bd77 100644 --- 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 index f55b51db..d19712f0 100644 --- 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): 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. *