fix: emit finished event for one time animation

[vincentfretin]

That's a regression from 4.3.0 with the multi-model refactor.
You can see the "Change animation speed" example at https://modelviewer.dev/examples/animation/ is currently broken, it doesn't emit finished event to play again the animation at different speed.

Claude Opus 4.8 did the fix. I confirm the robot example is working with those changes.
The multi-model refactor recreates the animation mixers on every setSource(), but the mixer event subscriptions (registered once when the animation feature is constructed, before any model is loaded) were not re-applied to the new mixers, so the 'finished' event was never dispatched.

[vincentfretin]

I also fixed another issue, this code never worked in any versions (at least on 4.1.0 when I first tried it)

modelViewer.animationName = "open";
modelViewer.currentTime = 0;
modelViewer.play({ repetitions: 1 });

it looped the animation instead of running it only once and emitting finished event.

With the change of this PR I can finally do this for a door model with an open and close animations, animation-crossfade-duration="0" and no autoplay on model-viewer tag, and a button to switch the animation:

    <script type="module">
      // Toggle button to play the "open" / "close" animations. Closed is the default.
      const modelViewer = document.querySelector("model-viewer");

      const button = document.createElement("button");
      button.type = "button";
      button.className = "animation-toggle";

      let isOpen = false; // closed by default
      let isPlaying = false;

      function render() {
        // label shows the action the button performs
        button.textContent = isOpen ? "Close" : "Open";
        button.disabled = isPlaying;
      }

      button.addEventListener("click", () => {
        if (isPlaying) return;
        const currentAnim = isOpen ? "close" : "open";
        modelViewer.animationName = currentAnim;
        // Restart from the first frame. A finished animation is left clamped on
        // its last frame, so replaying it would otherwise show the end pose
        // (e.g. the door already open) right away instead of animating.
        modelViewer.currentTime = 0;
        modelViewer.play({ repetitions: 1 });
        isPlaying = true;
        render();
      });
      const listener = () => {
        isPlaying = false;
        isOpen = !isOpen;
        render();
      };
      modelViewer.addEventListener("finished", listener);

      render();
      modelViewer.insertAdjacentElement("afterend", button);
    </script>

instead of the crazy workaround I had to do in 4.1.0 with the appendAnimation api:

    <script type="module">
      // Toggle button to play the "open" / "close" animations. Closed is the default.
      const modelViewer = document.querySelector("model-viewer");

      const button = document.createElement("button");
      button.type = "button";
      button.className = "animation-toggle";

      let isOpen = false; // closed by default
      let isPlaying = false;

      function render() {
        // label shows the action the button performs
        button.textContent = isOpen ? "Close" : "Open";
        button.disabled = isPlaying;
      }

      button.addEventListener("click", () => {
        if (isPlaying) return;
        const currentAnim = isOpen ? "close" : "open";
        // Setting modelViewer.animationName + play({ repetitions: 1 }) doesn't emit "finished",
        // so append every animation once (weight 0 for the others) and wait for them all to finish.
        modelViewer.availableAnimations.forEach((animationName) => {
          if (animationName !== currentAnim) {
            modelViewer.appendAnimation(animationName, { weight: 0, repetitions: 1 });
          }
        });
        modelViewer.appendAnimation(currentAnim, { weight: 1, repetitions: 1 });
        isPlaying = true;
        render();
        let countFinished = 0;
        const listener = () => {
          countFinished++;
          if (countFinished === modelViewer.availableAnimations.length) {
            isPlaying = false;
            isOpen = !isOpen;
            render();
            modelViewer.removeEventListener("finished", listener);
          }
        };
        modelViewer.addEventListener("finished", listener);
      });

      render();
      modelViewer.insertAdjacentElement("afterend", button);
    </script>

[vincentfretin]

I added an example in animation doc page with that exact use case.

[diegoteran]

thank you for the documentation too