Beispiel:JS-WAAPI-1.html
Aus SELFHTML-Wiki
<!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 {
display: block;
width: 10em;
margin: 1em 0 0 1em;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
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>
</head>
<body>
<h1>Animation mit Web Animations API (WAAPI)</h1>
<div>
<button id="play">Los!</button>
<button id="pause">Pause</button>
</div>
<svg viewBox="-60 -60 120 120">
<g id="gear" tabindex="1">
<path class="gear" d="m 1.7,-50.9 h -3.5 l -2.3,5.3 -0.2,5.1 -5.8,1 -1.9,-4.8 -3.9,-4.2 -3.3,1.2 -0.3,5.7 1.6,4.9 -5.1,2.9 -3.4,-3.8 -5.1,-2.6 -2.7,2.2 1.6,5.5 3.2,4 -3.8,4.5 -4.5,-2.4 -5.7,-0.7 -1.7,3 3.4,4.6 4.3,2.7 -2,5.6 -5.1,-0.8 -5.5,1.3 -0.6,3.4 4.7,3.2 5,1.1 v 5.9 l -5,1.1 -4.8,3.2 0.6,3.4 5.5,1.3 5,-0.8 2,5.6 -4.3,2.7 -3.4,4.6 1.8,3 5.6,-0.7 4.6,-2.5 3.8,4.5 -3.2,4 -1.6,5.5 2.7,2.2 5.1,-2.6 3.4,-3.8 5.1,2.9 -1.6,4.9 0.3,5.7 3.3,1.2 3.9,-4.1 1.9,-4.8 5.8,1 0.2,5.1 2.3,5.2 h 3.5 l 2.3,-5.2 0.2,-5.1 5.8,-1 1.9,4.8 3.9,4.2 3.3,-1.2 0.3,-5.7 -1.6,-4.9 5.1,-3 3.4,3.8 5.1,2.5 2.6,-2.2 -1.6,-5.5 -3.2,-4 3.8,-4.5 4.5,2.5 5.7,0.6 1.7,-3 -3.4,-4.6 -4.3,-2.7 2,-5.5 5,0.7 5.7,-1.2 L 50.4,7.1 45.7,4 40.7,2.9 V -3 l 5,-1.1 4.8,-3.1 -0.6,-3.4 -5.5,-1.3 -5,0.7 -2,-5.5 4.3,-2.8 3.4,-4.6 -1.7,-3 -5.7,0.7 -4.5,2.4 -3.8,-4.5 3.2,-4 1.6,-5.5 -2.7,-2.2 -5.1,2.6 -3.4,3.8 -5.1,-2.9 1.6,-4.9 -0.3,-5.7 -3.3,-1.2 -3.9,4.2 -1.9,4.8 -5.8,-1 -0.2,-5.1 -2.3,-5.3 z m -5.4,17.1 0.1,20.7 c -4.7,1.3 -8.3,5 -9.5,9.6 l -20.7,0.1 c 1.5,-16 14.2,-28.8 30.1,-30.5 z m 7,0 c 16,1.5 28.8,14.2 30.5,30.1 L 13,-3.6 C 11.8,-8.2 8.1,-11.8 3.4,-13 Z M 1.1,-6.4 C 4.6,-5.8 7,-2.4 6.4,1.1 5.8,4.6 2.4,7 -1.1,6.4 -4.6,5.8 -7,2.4 -6.4,-1.1 -5.8,-4.6 -2.4,-7 1.1,-6.4 Z M -33.8,3.7 -13,3.6 c 1.3,4.6 4.9,8.3 9.6,9.5 l 0.1,20.8 C -19.3,32.3 -32,19.7 -33.8,3.7 Z M 13,3.4 33.8,3.3 C 32.3,19.3 19.7,32.1 3.7,33.8 L 3.6,13 C 8.2,11.7 11.8,8.1 13,3.4 Z" />
</g>
</svg>
</body>
</html>
