SVGAnimationElement.endElement() — Methode · JavaScript-Referenz

Signatur

SVGAnimationElement.prototype.endElement()

Beschreibung

Die Methode endElement() des Interfaces SVGAnimationElement erzeugt eine Endinstanzzeit für die aktuelle Dokumentzeit und fügt sie der Liste der Endzeiten des Animationselements hinzu. Ist die Animation gerade aktiv, endet ihr aktives Intervall damit sofort. Der Aufruf entspricht endElementAt(0).

Mit der Methode steuert man deklarative SMIL-Animationen aus JavaScript, zum Beispiel wenn eine Lade-Animation stoppen soll, sobald die Daten angekommen sind, oder wenn ein Stopp-Knopf eine Endlosanimation (repeatCount="indefinite") anhalten soll. Zusammen mit beginElement() lassen sich Animationen vollständig per Skript starten und beenden. Dafür setzt man oft begin="indefinite" und end="indefinite", damit die Animation ausschließlich per Skript läuft.

Welchen Wert das Attribut nach dem Ende anzeigt, hängt von fill ab: Mit fill="remove" (Standard) springt es auf den Ausgangswert zurück, mit fill="freeze" bleibt der zuletzt berechnete Animationswert erhalten. Wenn das Ende wirksam wird, feuert das Element das Ereignis endEvent.

Beispiele

Lade-Animation stoppen, sobald Daten da sind

// <svg><circle r="10" cx="20" cy="20">
//   <animate id="pulse" attributeName="r" values="10;16;10" dur="1s"
//            repeatCount="indefinite" fill="freeze" />
// </circle></svg>
const pulse = document.getElementById('pulse');

const loadData = async () => {
  try {
    const res = await fetch('/api/daten');
    const data = await res.json();
    console.log('Geladen:', data);
  } finally {
    pulse.endElement(); // Animation sofort beenden
  }
};

loadData();

Geladen: { … }

Start/Stopp-Knopf mit beginElement() und endElement()

// <animateTransform id="spin" attributeName="transform" type="rotate"
//   from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"
//   begin="indefinite" end="indefinite" />
// <button id="toggle">Start</button>
const spin = document.getElementById('spin');
const button = document.getElementById('toggle');
let running = false;

button.addEventListener('click', () => {
  if (running) {
    spin.endElement();
    button.textContent = 'Start';
  } else {
    spin.beginElement();
    button.textContent = 'Stopp';
  }
  running = !running;
});

Auf das Ende reagieren (endEvent)

const anim = document.querySelector('animate');

anim.addEventListener('endEvent', () => {
  console.log('Animation beendet bei', anim.getCurrentTime().toFixed(2), 's');
});

// Nach 3 Sekunden beenden
setTimeout(() => anim.endElement(), 3000);

Animation beendet bei 3.00 s

// Wichtig · Fallstricke

Nur bei aktiver Animation sichtbar: Läuft die Animation gerade nicht (sie hat noch nicht begonnen oder ist schon zu Ende), bewirkt der Aufruf in der Regel nichts Sichtbares.
min-Attribut: Ein gesetztes min legt eine Mindestdauer für das aktive Intervall fest. Die Animation kann dann auch mit endElement() nicht früher enden.
fill beachten: Ohne fill="freeze" springt das Attribut nach dem Ende auf seinen Ausgangswert zurück. Das wirkt oft wie ein „Zurückspringen“.
Neustart: Ob sich die Animation später mit beginElement() erneut starten lässt, bestimmt das Attribut restart (always, whenNotActive, never).
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kannte SMIL-Animationen nie. Für CSS- oder Web-Animations-API-Animationen gilt die Methode nicht; dort verwendet man Animation.cancel() bzw. finish().
Ereignisnamen: Im Skript heißt das Ereignis endEvent, im SMIL-Attribut end="id.end". Die Property onend steht ebenfalls zur Verfügung.

Siehe auch

SVGAnimationElement SVGAnimationElement.endElementAt() SVGAnimationElement.beginElement() SVGAnimationElement.beginElementAt() SVGAnimationElement.getCurrentTime() RestrictionTarget.fromElement()