jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create interruptible animation

This commit is contained in:
“chrisshank” 2024-09-11 00:26:59 -07:00
parent 14a519b705
commit 8dbc00635b
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/music/record-player.ts
View File

@ -279,11 +279,33 @@ export class RecordPlayer extends HTMLElement {
stop() { stop() {
if (this.paused) return; if (this.paused) return;
const arm = this.shadowRoot!.querySelector('.tone-arm') as HTMLElement;
const animation = arm.getAnimations()[0];
if (animation) {
animation.commitStyles();
animation.cancel();
const rotate = arm.style.rotate;
arm.style.rotate = '';
arm.animate(
[
{ rotate },
{ rotate, transform: 'rotateX(20deg)', offset: 0.2 },
{ transform: 'rotateX(20deg)', offset: 0.8 },
],
{
duration: 3000,
}
);
}
clearTimeout(this.#playTimeout); clearTimeout(this.#playTimeout);
this.#internals.states.delete('playing'); this.#internals.states.delete('playing');
this.#audio.pause(); this.#audio.pause();
this.#audio.currentTime = 0; this.#audio.currentTime = 0;
this.dispatchEvent(new Event('stopped', { bubbles: true })); this.dispatchEvent(new Event('stopped', { bubbles: true }));
// console.log(a);
} }
handleEvent(event: Event) { handleEvent(event: Event) {