Skip to content

Commit

Permalink
feat: 🎸 Add setSegments, Playback State Properties & Refactor Default…
Browse files Browse the repository at this point in the history 
… Mode; fix: Prevent Redundant stop Event (#55)

* feat: 🎸 segments

* fix: 🐛 loop event not triggered on high speed

* chore: 🤖 revert back the examples

* chore: 🤖 add changesets

* chore: 🤖 update README

* feat: 🎸 setSegments

* chore: 🤖 update README

* chore: 🤖 update changelog

* chore: 🤖 Update README

* chore: 🤖 update changelog

* chore: 🤖 fix example app build

* chore: 🤖 update example

* chore: 🤖 update README
  • Loading branch information
@theashraf
theashraf authored Nov 28, 2023
1 parent b35b183 commit 82c01b6
Show file tree
Hide file tree
Showing 8 changed files with 396 additions and 170 deletions.
5 changes: 5 additions & 0 deletions .changeset/orange-years-ring.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/dotlottie-web': patch
---

fix: 🐛 prevent `stop` event from triggering if playback is already stopped.
5 changes: 5 additions & 0 deletions .changeset/slow-tools-bake.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/dotlottie-web': minor
---

refactor: rename default mode to `forward`
5 changes: 5 additions & 0 deletions .changeset/soft-kids-chew.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/dotlottie-web': minor
---

feat: 🎸 `isPlaying`, `isPaused`, `isStopped` properties
5 changes: 5 additions & 0 deletions .changeset/wise-cats-yell.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/dotlottie-web': minor
---

feat: 🎸 add `setSegments` method & `segments` config.
50 changes: 40 additions & 10 deletions apps/dotlottie-web-example/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,39 @@ app.innerHTML = `
<div class="container">
<canvas id="canvas"></canvas>
<div class="control-panel">
<button id="playPause" class="control-button">Play</button>
<button id="stop" class="control-button">Stop</button>
<div>
<button id="playPause" class="control-button">Play</button>
<button id="stop" class="control-button">Stop</button>
<button id="jump" class="control-button">Jump</button>
<button id="destroy" class="control-button" style="background: #cd3434;">Destroy</button>
<button id="reload" class="control-button">Reload</button>
<label for="loopToggle">Loop: </label>
<input type="checkbox" id="loopToggle" checked />
</div>
<label for="frameSlider">Frame: <span id="current-frame">0</span></label>
<input type="range" id="frameSlider" min="0" step="0.1" />
<label for="loopToggle">Loop: </label>
<input type="checkbox" id="loopToggle" checked />
<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="jump" class="control-button">Jump</button>
<button id="destroy" class="control-button" style="background: #cd3434;">Destroy</button>
<button id="reload" class="control-button">Reload</button>
<label for="mode">Mode: </label>
<select id="mode">
<option value="bounce">Bounce</option>
<option value="bounce-reverse">Bounce Reverse</option>
<option value="reverse">Reverse</option>
<option value="normal">Default</option>
<option value="forward">Forward</option>
</select>
<div class="segments-control">
<label for="startFrame">Start Frame: </label>
<input type="number" id="startFrame" value="10" min="0" />
<label for="endFrame">End Frame: </label>
<input type="number" id="endFrame" value="90" min="0" />
<button id="setSegments" class="control-button">Set Segments</button>
</div>
</div>
</div>
`;
Expand Down Expand Up @@ -96,6 +109,8 @@ fetch('/hamster.lottie')
loop: true,
autoplay: true,
mode: 'bounce',
segments: [10, 90],
speed: 1,
backgroundColor: 'purple',
});

Expand All @@ -110,13 +125,28 @@ fetch('/hamster.lottie')
const reloadButton = document.getElementById('reload') as HTMLButtonElement;
const jumpButton = document.getElementById('jump') as HTMLButtonElement;
const modeSelect = document.getElementById('mode') as HTMLSelectElement;
const startFrameInput = document.getElementById('startFrame') as HTMLInputElement;
const endFrameInput = document.getElementById('endFrame') as HTMLInputElement;
const setSegmentsButton = document.getElementById('setSegments') as HTMLButtonElement;

setSegmentsButton.addEventListener('click', () => {
const startFrame = parseInt(startFrameInput.value, 10);
const endFrame = parseInt(endFrameInput.value, 10);

dotLottie.setSegments(startFrame, endFrame);
});

modeSelect.addEventListener('change', () => {
dotLottie.setMode(modeSelect.value.toString() as Mode);
});

jumpButton.addEventListener('click', () => {
const midFrame = dotLottie.totalFrames / 2;
if (!dotLottie.segments) return;

const startFrame = parseInt(dotLottie.segments[0].toString(), 10);
const endFrame = parseInt(dotLottie.segments[1].toString(), 10);

const midFrame = (endFrame - startFrame) / 2 + startFrame;

dotLottie.setFrame(midFrame);
});
Expand All @@ -137,7 +167,7 @@ fetch('/hamster.lottie')
});

playPauseButton.addEventListener('click', () => {
if (dotLottie.playing) {
if (dotLottie.isPlaying) {
dotLottie.pause();
} else {
dotLottie.play();
Expand Down
24 changes: 24 additions & 0 deletions apps/dotlottie-web-example/src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,27 @@ canvas {
width: 200px;
cursor: pointer;
}

.segments-control {
display: flex;
align-items: center;
justify-content: space-around;
margin: 20px 0;
padding: 10px;
background-color: #f0f0f0;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.segments-control label {
margin-right: 10px;
font-weight: bold;
}

.segments-control input[type='number'] {
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
width: 60px;
margin: 0 10px;
}
46 changes: 26 additions & 20 deletions packages/web/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,31 +124,36 @@ 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". |
| `backgroundColor` | string | | undefined | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent". |
| 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". |
| `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |

### Properties

`DotLottie` instances expose the following properties:

| Property | Type | Description |
| -------------- | ------- | ------------------------------------------------------------------------------------------- |
| `currentFrame` | number | Represents the animation's currently displayed frame number. |
| `duration` | number | Specifies the animation's total playback time in milliseconds. |
| `totalFrames` | number | Denotes the total count of individual frames within the animation. |
| `loop` | boolean | Indicates if the animation is set to play in a continuous loop. |
| `speed` | number | Represents the playback speed factor; e.g., 2 would mean double speed. |
| `loopCount` | number | Tracks how many times the animation has completed its loop. |
| `playing` | boolean | Reflects whether the animation is in active playback or not |
| `direction` | string | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse. |
| Property | Type | Description |
| -------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `currentFrame` | number | Represents the animation's currently displayed frame number. |
| `duration` | number | Specifies the animation's total playback time in milliseconds. |
| `totalFrames` | number | Denotes the total count of individual frames within the animation. |
| `loop` | boolean | Indicates if the animation is set to play in a continuous loop. |
| `speed` | number | Represents the playback speed factor; e.g., 2 would mean double speed. |
| `loopCount` | number | Tracks how many times the animation has completed its loop. |
| `direction` | string | Reflects the current playback direction; e.g., 1 would mean forward, -1 would mean reverse. |
| `mode` | string | Reflects the current playback mode. |
| `isPaused` | boolean | Reflects whether the animation is paused or not. |
| `isStopped` | boolean | Reflects whether the animation is stopped or not. |
| `isPlaying` | boolean | Reflects whether the animation is playing or not. |
| `segments` | number | Reflects the frames range of the animations. where segments\[0] is the start frame and segments\[1] is the end frame. |

### Methods

Expand All @@ -167,6 +172,7 @@ The `DotLottie` constructor accepts a config object with the following propertie
| `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. |
| `setMode(mode: string)` | Sets the animation play mode. |
| `setSegments(startFrame: number, endFrame: number)` | Sets the start and end frame of the animation. |

### Static Methods

Expand Down
Loading

0 comments on commit 82c01b6

Please sign in to comment.