Beispiel:JS-WAAPI-1.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0">
<title>WAAPI - 1</title> <style>
- gear {
fill: #ddd; stroke: #333; stroke-width: 1; }
svg { width: 10em; margin: 1em auto 2em; }
</style> </head>
<body> <svg viewBox="-60 -60 120 120"> <g id="gear" tabindex="1"> <path class="gear" d="m1.7-50.9-3.5 0-2.3 5.3-0.4 2.8 0.2 2.3-5.8 1-0.6-2.3-1.3-2.5-3.9-4.2-3.3 1.2-0.3 5.7 0.6 2.8 1 2.1-5.1 2.9-1.3-1.9-2.1-1.9-5.1-2.6-2.7 2.2 1.6 5.5 1.5 2.4 1.7 1.6-3.8 4.5-1.9-1.3-2.6-1.1-5.7-0.7-1.7 3 3.4 4.6 2.2 1.8 2.1 0.9-2 5.6-2.3-0.7-2.8-0.1-5.5 1.3-0.6 3.4 4.7 3.2 2.7 0.9 2.3 0.2 0 5.9-2.3 0.2-2.7 0.9-4.8 3.2 0.6 3.4 5.5 1.3 2.8-0.1 2.2-0.7 2 5.6-2.1 0.9-2.2 1.8-3.4 4.6 1.8 3 5.6-0.7 2.7-1.1 1.9-1.4 3.8 4.5-1.7 1.6-1.5 2.4-1.6 5.5 2.7 2.2 5.1-2.6 2.1-1.9 1.3-1.9 5.1 2.9-1 2.1-0.6 2.8 0.3 5.7 3.3 1.2 3.9-4.1 1.3-2.5 0.6-2.3 5.8 1-0.2 2.3 0.4 2.8 2.3 5.2 3.5 0 2.3-5.2 0.4-2.8-0.2-2.3 5.8-1 0.6 2.3 1.3 2.5 3.9 4.2 3.3-1.2 0.3-5.7-0.6-2.8-1-2.1 5.1-3 1.3 1.9 2.1 1.9 5.1 2.5 2.6-2.2-1.6-5.5-1.5-2.4-1.7-1.6 3.8-4.5 1.9 1.4 2.6 1.1 5.7 0.6 1.7-3-3.4-4.6-2.2-1.7-2.1-1 2-5.5 2.2 0.6 2.8 0.1L49.8 10.5 50.4 7.1 45.7 4 43 3.1 40.7 2.9l0-5.9 2.3-0.2 2.7-0.9 4.8-3.1-0.6-3.4-5.5-1.3-2.8 0.1-2.2 0.6-2-5.5 2.1-1 2.2-1.8 3.4-4.6-1.7-3-5.7 0.7-2.6 1.1-1.9 1.3-3.8-4.5 1.7-1.6 1.5-2.4 1.6-5.5-2.7-2.2-5.1 2.6-2.1 1.9-1.3 1.9-5.1-2.9 1-2.1 0.6-2.8-0.3-5.7-3.3-1.2-3.9 4.2-1.3 2.5-0.6 2.3-5.8-1 0.2-2.3-0.4-2.8-2.3-5.3zm-5.4 17.1 0.1 20.7c-4.7 1.3-8.3 5-9.5 9.6l-20.7 0.1c1.5-16 14.2-28.8 30.1-30.5zm7 0C19.3-32.3 32.1-19.6 33.8-3.7L13-3.6C11.8-8.2 8.1-11.8 3.4-13zM1.1-6.4c3.5 0.6 5.9 4 5.3 7.5-0.6 3.5-4 5.9-7.5 5.3-3.5-0.6-5.9-4-5.3-7.5 0.6-3.5 4-5.9 7.5-5.3zM-33.8 3.7-13 3.6c1.3 4.6 4.9 8.3 9.6 9.5l0.1 20.8C-19.3 32.3-32 19.7-33.8 3.7zM13 3.4 33.8 3.3C32.3 19.3 19.7 32.1 3.7 33.8L3.6 13C8.2 11.7 11.8 8.1 13 3.4z" /> </g> </svg> <button id="play">Los!</button> <button id="pause">Pause</button>
<script> const gear = document.querySelector("#gear"); const playBtn = document.querySelector("#play"); const pauseBtn = document.querySelector("#pause");
const animation = gear.animate(
[
{ rotate: "0" },
{ rotate: "1turn" }
],
{
duration: 3500,
iterations: Infinity
}
);
playBtn.addEventListener("click", () => {
animation.play();
});
pauseBtn.addEventListener("click", () => {
animation.pause();
});
</script> </body> </html>
