From 8e8bd1b9d3449f9456d144faec652c64177f7a04 Mon Sep 17 00:00:00 2001 From: Abdelrahman Ashraf Date: Thu, 23 Nov 2023 13:54:10 +0700 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20backgroundColor=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 backgroundColor * chore: 🤖 add changeset --- .changeset/twenty-chairs-return.md | 5 +++++ apps/dotlottie-web-example/src/main.ts | 5 ++++- packages/web/README.md | 19 ++++++++++--------- packages/web/src/dotlottie.ts | 13 +++++++++++++ 4 files changed, 32 insertions(+), 10 deletions(-) create mode 100644 .changeset/twenty-chairs-return.md diff --git a/.changeset/twenty-chairs-return.md b/.changeset/twenty-chairs-return.md new file mode 100644 index 00000000..8d982181 --- /dev/null +++ b/.changeset/twenty-chairs-return.md @@ -0,0 +1,5 @@ +--- +'@lottiefiles/dotlottie-web': minor +--- + +feat: 🎸 backgroundColor diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts index c3875adc..5c70b802 100644 --- a/apps/dotlottie-web-example/src/main.ts +++ b/apps/dotlottie-web-example/src/main.ts @@ -13,7 +13,7 @@ const app = document.getElementById('app') as HTMLDivElement; app.innerHTML = `
- + @@ -62,6 +62,7 @@ const allCanvas = document.querySelectorAll('canvas[data-src]') as NodeListOf { const src = canvas.getAttribute('data-src') as string; + const backgroundColor = canvas.getAttribute('data-bg-color') as string; // eslint-disable-next-line no-new new DotLottie({ @@ -69,6 +70,7 @@ allCanvas.forEach((canvas) => { src, loop: true, autoplay: true, + backgroundColor, }); }); @@ -85,6 +87,7 @@ fetch('/hamster.lottie') loop: true, autoplay: true, mode: 'bounce', + backgroundColor: 'purple', }); const playPauseButton = document.getElementById('playPause') as HTMLButtonElement; diff --git a/packages/web/README.md b/packages/web/README.md index 673c2f46..c1a96d55 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -122,15 +122,16 @@ For this behavior to work correctly, the canvas element must be styled using CSS 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". | +| 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". | +| `backgroundColor` | string | | undefined | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent". | ### Properties diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts index 0341a6ef..9cc0a46a 100644 --- a/packages/web/src/dotlottie.ts +++ b/packages/web/src/dotlottie.ts @@ -20,6 +20,10 @@ export interface Config { * Boolean indicating if the animation should start playing automatically. */ autoplay?: boolean; + /** + * Animation canvas background color. + */ + backgroundColor?: string; /** * The canvas element to render the animation on. */ @@ -103,6 +107,10 @@ export class DotLottie { this._autoplay = config.autoplay ?? false; this._mode = config.mode ?? 'normal'; + if (config.backgroundColor) { + this._canvas.style.backgroundColor = config.backgroundColor; + } + if (!(this._canvas.hasAttribute('width') || this._canvas.hasAttribute('height'))) { this._shouldAutoResizeCanvas = true; @@ -570,6 +578,11 @@ export class DotLottie { this._bounceCount = 0; this._direction = 1; this._mode = config.mode ?? 'normal'; + this._canvas.style.backgroundColor = ''; + + if (config.backgroundColor) { + this._canvas.style.backgroundColor = config.backgroundColor; + } if (config.src) { this._loadAnimationFromURL(config.src);