Wie kann man eine Animationen in JavaScript machen?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
programmieren, JavaScript
24.10.2021, 00:08

Ich denke, dass du dein Problem noch immer mit CSS lösen kannst. Schachtel deine HTML-Struktur an der Stelle.

<div id="c">
  <div>
    <!-- your content ... -->
  </div>
</div>

Die äußere Box nimmt die Verschiebeanimation vor und die innere die Rotation.

#c {
  /* ... */
  animation: hei 5s 1 0s linear forwards;
}

#c > div {
  animation: rotate 5s 1 5s;
}

Bei JavaScript-Animationen würde ich an deiner Stelle erst überlegen, ob es sich um eine Aktion im DOM handeln soll oder ob es nicht sinnvoller wäre, sie auf einem canvas-Element (siehe Canvas API) zu produzieren.

Bei einer Aktion im DOM kann man die setInterval-Funktion nutzen.

setInterval(function() {
  /* one animation step ... */
}, 1000);

Das zweite Argument definiert die Dauer eines Intervalls. Die Einheit beträgt hierbei Milisekunden, wobei 1000ms genau eine Sekunde ergeben.

Ein Dokument mit rotierender Box könnte so aussehen:

<!doctype html>
<head>
  <title>Example</title>
  <style>
  #box {
    background: red;
    height: 50px;
    width: 50px;
  }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    function rotate() {
      const box = document.getElementById("box");
      let rotation = 0;
      setInterval(function() {
        box.style.transform = `rotate(${rotation}deg)`;
        rotation = ++rotation > 360 ? 0 : rotation;
      }, 10);
    }
    rotate();
  </script>
</body>

Doch auch hier würde ich eine Verschachtelung im HTML vornehmen, damit sich CSS-Animation und Skript nicht beim Definieren des transform-Property überschneiden.
trtkayozz 
Fragesteller
 24.10.2021, 10:16

Danke es hat mier sehr geholfen. Das war eine sehr gute ide :)

0