SVGAnimationElement: endEvent Ereignis
Das endEvent
Ereignis der SVGAnimationElement
Schnittstelle wird ausgelöst, wenn das aktive Ende der Animation erreicht ist.
Hinweis: Dieses Ereignis wird nicht am einfachen Ende jeder Animationswiederholung ausgelöst. Es kann sowohl im Verlauf der normalen (d.h. geplanten oder interaktiven) Timeline-Wiedergabe als auch, wenn das Element mit einer DOM-Methode beendet wurde, ausgelöst werden.
Dieses Ereignis ist nicht abbrechbar und wird nicht gebubbelt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("endEvent", (event) => {});
onend = (event) => {};
Ereignistyp
Ereigniseigenschaften
TimeEvent.detail
Schreibgeschützt-
Ein
long
, das einige Detailinformationen über das Ereignis angibt, abhängig vom Typ des Ereignisses. Bei diesem Ereignistyp zeigt es die Wiederholungsnummer der Animation an. TimeEvent.view
Schreibgeschützt-
Ein WindowProxy, das das Fenster identifiziert, aus dem das Ereignis generiert wurde.
Beispiele
Animierter Kreis
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<title>SVG SMIL Animate with Path</title>
<circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
<hr />
<button>Stop animation</button>
<ul></ul>
ul {
height: 100px;
border: 1px solid #ddd;
overflow-y: scroll;
padding: 10px 30px;
}
let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");
let btn = document.querySelector("button");
animateElem.addEventListener("beginEvent", () => {
let listItem = document.createElement("li");
listItem.textContent = "beginEvent fired";
list.appendChild(listItem);
});
animateElem.addEventListener("endEvent", () => {
let listItem = document.createElement("li");
listItem.textContent = "endEvent fired";
list.appendChild(listItem);
});
animateElem.addEventListener("repeatEvent", (e) => {
let listItem = document.createElement("li");
let msg = "repeatEvent fired";
if (e.detail) {
msg += `; repeat number: ${e.detail}`;
}
listItem.textContent = msg;
list.appendChild(listItem);
});
btn.addEventListener("click", () => {
btn.disabled = true;
animateElem.setAttribute("repeatCount", "1");
});
Äquivalent zur Ereignishandler-Eigenschaft
Beachten Sie, dass Sie auch einen Ereignislistener für das end
Ereignis mit der onend
Ereignishandler-Eigenschaft erstellen können:
animateElem.onend = () => {
console.log("endEvent fired");
};
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # EndEvent |
Browser-Kompatibilität
Siehe auch
- SVG-Animation mit SMIL
beginEvent
EreignisrepeatEvent
Ereignis