Programmiererforum

Code: Select all

const elAnimation = document.querySelector("#animation");
const elStartButton = document.querySelector("#btnStartAnimation");
const elPath = document.querySelector("#elPath");
const elSpan = document.querySelector(".dvalue");

elStartButton.addEventListener("click", () => {
elAnimation.beginElement();
});

let x = 0;

function getDValue(value) {
return `m 3.0230713,3.0230713 h 8.6091807 v 3.0887902 l 30.822183,0.3285947 0.06572,-3.4173849 H 50.20927 V 23.855974 H ${3.0230713 + x} Z`;
}

function setDValue(value) {
elPath.setAttribute('d', value);
}

setInterval(() => {
const newDValue = getDValue(x);
setDValue(newDValue);
elSpan.textContent = x;
x++;
if (x > 15) x=0;

}, 500);< /code>
path {
stroke: #F00;
}< /code>
Start








< /code>
< /div>
< /div>
< /p>
Wir haben eine Schleife, die sich am (der untere linke Scheitelpunkt, der auf den linken Scheitelpunkt läuft, geändert hat das Recht). Es ist eine D -Eigenschaftsänderung. Der Scheitelpunkt unter den unteren linken Scheitelpunkten läuft nicht nach rechts, aber der Wert ändert sich immer noch, wie wir auf der rechten Seite der Taste sehen können. /Code> und React