TimeEvent — Schnittstelle · JavaScript-Referenz

Signatur

interface TimeEvent extends Event

Beschreibung

Die Schnittstelle TimeEvent gehört zur SVG-SMIL-Animation und erweitert Event um Informationen zum Zeitverlauf einer Animation. Ausgelöst wird sie von Animationselementen wie <animate>, <animateTransform>, <animateMotion> und <set> (also von SVGAnimationElement), wenn eine Animation startet, endet oder sich wiederholt.

Es gibt drei zugehörige Ereignistypen:

beginEvent – die Animation beginnt (Handler-Eigenschaft onbegin).
endEvent – die Animation endet (Handler-Eigenschaft onend).
repeatEvent – ein neuer Wiederholungsdurchlauf beginnt (Handler-Eigenschaft onrepeat); in detail steht die Nummer der Wiederholung.

Wichtige Eigenschaften und Methoden:

TimeEvent.detail (number, nur lesbar) – bei repeatEvent der Wiederholungszähler (1, 2, 3 …), sonst meist 0.
TimeEvent.view (Window | null, nur lesbar) – das Window, in dem das Ereignis entstanden ist.
TimeEvent.initTimeEvent(type, view, detail) – veraltete Methode zum Initialisieren eines selbst erzeugten Ereignisses.

Nutzen Sie TimeEvent, wenn Sie JavaScript-Logik mit deklarativen SVG-Animationen synchronisieren wollen, etwa um nach Animationsende einen Button freizuschalten, Durchläufe zu zählen oder mehrere Animationen zu verketten, ohne mit Timern zu arbeiten.

Parameter

Name	Typ	Beschreibung
$typeArg Pflicht	string	Nur für `initTimeEvent()`: Ereignistyp, z. B. `"beginEvent"`, `"endEvent"` oder `"repeatEvent"`.
$viewArg Pflicht	Window \| null	Nur für `initTimeEvent()`: Wert für `event.view`, in der Regel `window`.
$detailArg Pflicht	number	Nur für `initTimeEvent()`: Wert für `event.detail`, z. B. der Wiederholungszähler.

Rückgabewert

Typ

TimeEvent

Beschreibung

Das Ereignisobjekt wird den Listenern von beginEvent, endEvent und repeatEvent übergeben. initTimeEvent() selbst gibt undefined zurück.

Beispiele

Wiederholungen einer SMIL-Animation zählen

// HTML: <svg width="120" height="120"><circle cx="60" cy="60" r="20" fill="tomato">
//   <animate id="puls" attributeName="r" values="20;50;20" dur="1s" repeatCount="3" />
// </circle></svg>
const anim = document.getElementById('puls');

anim.addEventListener('beginEvent', (e) => {
  console.log(`Start – Typ: ${e.type}, Instanz von TimeEvent: ${e instanceof TimeEvent}`);
});

anim.addEventListener('repeatEvent', (e) => {
  console.log(`Wiederholung Nr. ${e.detail}`);
});

anim.addEventListener('endEvent', () => {
  console.log('Animation beendet');
});

Start – Typ: beginEvent, Instanz von TimeEvent: true Wiederholung Nr. 1 Wiederholung Nr. 2 Animation beendet

Animation per Klick starten und Ende über onend abfangen

// HTML: <button id="start">Einblenden</button>
// <svg width="200" height="60"><rect width="200" height="60" fill="steelblue" opacity="0">
//   <animate id="fade" attributeName="opacity" from="0" to="1" dur="0.8s" begin="indefinite" fill="freeze" />
// </rect></svg>
const button = document.getElementById('start');
const fade = document.getElementById('fade');

button.addEventListener('click', () => {
  button.disabled = true;
  fade.beginElement(); // löst beginEvent aus
});

// Alternative zur addEventListener-Variante: Handler-Eigenschaft
fade.onend = (event) => {
  console.log(`${event.type} im Fenster: ${event.view === window}`);
  button.disabled = false;
  button.textContent = 'Nochmal';
};

endEvent im Fenster: true

Listener nach dem ersten Durchlauf wieder entfernen

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

const beiWiederholung = (e) => {
  console.log(`Durchlauf ${e.detail} erreicht`);
  if (e.detail >= 2) {
    anim.removeEventListener('repeatEvent', beiWiederholung);
    anim.endElement(); // Animation vorzeitig beenden -> endEvent
  }
};

anim.addEventListener('repeatEvent', beiWiederholung);
// Alternativ nur einmal reagieren: { once: true }
anim.addEventListener('endEvent', () => console.log('Fertig'), { once: true });

Durchlauf 1 erreicht Durchlauf 2 erreicht Fertig

// Wichtig · Fallstricke

Kein Konstruktor: new TimeEvent() ist nicht spezifiziert. Ereignisse entstehen durch die Animations-Engine (auch über beginElement()/endElement()). Für eigene Tests besser new Event('endEvent') dispatchen – initTimeEvent() ist veraltet.
Ereignisnamen: Bei addEventListener heißen die Typen beginEvent, endEvent und repeatEvent (Groß-/Kleinschreibung beachten!), die Handler-Eigenschaften dagegen onbegin, onend und onrepeat. Im SVG-Markup und in begin-Attributen schreibt man z. B. begin=\"fade.end\".
repeatEvent wird nur bei echten Wiederholungen ausgelöst (repeatCount bzw. repeatDur), nicht für den ersten Durchlauf. Bei sehr kurzen dur-Werten oder im Hintergrund-Tab können Ereignisse gebündelt oder verzögert ankommen.
Kompatibilität: SMIL-Animation und TimeEvent werden von allen aktuellen Browsern unterstützt; Chrome hatte SMIL zeitweise als veraltet markiert, die Ankündigung aber zurückgenommen. Ältere Internet Explorer und das alte Edge (EdgeHTML) unterstützen SMIL nicht. Für neue, komplexe Animationen sind CSS-Animationen oder die Web Animations API oft die flexiblere Wahl.
Die Ereignisse steigen nicht auf (bubbles ist false) – registrieren Sie den Listener daher direkt am Animationselement, nicht am übergeordneten <svg>.

Siehe auch

Event TextEvent UIEvent BlobEvent CloseEvent