Animieren von Keyframes basierend auf dynamischen Werten mit JavaScript

So berechnen und animieren Sie Keyframe-Werte mit JavaScript

Beim Erstellen dynamischer Webanwendungen kann die Kombination von JavaScript mit CSS-Animationen fließende, optisch ansprechende Übergänge erzeugen. Eine häufige Herausforderung besteht darin, Elemente basierend auf Echtzeitdatenwerten zu animieren. Ein gutes Beispiel ist das Erstellen von Keyframe-Animationen, die den aktuellen Prozentsatz eines Fortschrittsbalkens mithilfe von SVG und Stroke-Dashoffset widerspiegeln.

Diese Technik kann besonders nützlich sein, wenn Sie dynamische Werte wie die Abonnentenzahl anzeigen, wie in diesem Beispiel, wo die Anzahl der Abonnements in Echtzeit aktualisiert wird. Damit die Animation reibungslos funktioniert, können wir diese Zahl in einen Prozentsatz umwandeln und direkt auf die CSS-Animation anwenden.

Allerdings kann JavaScript beim Umgang mit CSS-Animationen verwirrend sein, insbesondere bei der Berechnung von Werten wie Prozentsätzen zur effektiven Manipulation von Keyframes. In diesem Fall ist es wichtig zu verstehen, wie dynamische Daten mit JavaScript extrahiert und manipuliert werden, um sicherzustellen, dass Ihre Animationen den richtigen Wert widerspiegeln.

Dieser Artikel führt Sie durch die Verwendung von JavaScript, um numerische Daten zu extrahieren, Prozentsätze zu berechnen und sie mithilfe der Eigenschaft „Stroke-Dashoffset“ auf Keyframes anzuwenden. Am Ende werden Sie ein klares Verständnis davon haben, wie JavaScript und CSS zusammenarbeiten können, um responsive Animationen zu erstellen.

Animieren von SVG-Kreisen mit JavaScript: Eine Schritt-für-Schritt-Anleitung

In diesem Beispiel haben wir mithilfe einer Kombination aus JavaScript und CSS eine dynamische Animation für einen SVG-Kreis erstellt. Das Hauptziel besteht darin, den Fortschritt eines Kreises zu animieren, um die Anzahl der Abonnements in Echtzeit visuell darzustellen. Der Kreis nutzt die Stroke-Dashoffset CSS-Eigenschaft, die steuert, wie viel vom Strich des Kreises sichtbar ist. JavaScript wird verwendet, um den Prozentsatz des Fortschritts abzurufen und zu berechnen und diesen Wert dann auf den Strich anzuwenden, was eine reibungslose Animation basierend auf Echtzeitdaten ermöglicht.

Eine Schlüsselkomponente ist die bringen Funktion, die Daten von einer Datei oder einem Server abruft, in diesem Fall die Abonnementanzahl. Das Skript extrahiert den numerischen Teil der Daten mithilfe von String-Manipulationsmethoden wie Teilt(), und wandelt das Ergebnis mit in eine verwendbare Zahl um parseInt(). Indem wir die aktuelle Abonnementzahl durch das Ziel dividieren, berechnen wir den Fortschritt als Dezimalzahl (Prozentsatz). Dieser Prozentsatz wird dann auf die angewendet Stroke-Dashoffset um den visuellen Effekt zu erzeugen.

Das zweite Skript übernimmt die Beschriftungsrotation, wodurch der Anzeige eine Ebene dynamischen Inhalts hinzugefügt wird. Beschriftungen werden dem DOM mithilfe von hinzugefügt cloneNode() Methode, die eine vorhandene Etikettenvorlage dupliziert. Jedes Etikett wird in einem festgelegten Intervall gedreht, das von gesteuert wird setTimeout() Funktion. Diese Methode löst die Drehung nach einer bestimmten Verzögerung aus und sorgt so für einen reibungslosen Übergang zwischen Beschriftungen, ohne dass eine Benutzerinteraktion erforderlich ist.

Die Kombination aus Stroke-Dashoffset Für den Kreis und das Etikettenrotationsskript entsteht eine ansprechende Benutzeroberfläche. Indem wir sowohl den Fortschritt des Kreises als auch die angezeigten Beschriftungen dynamisch ändern, geben wir Benutzern in Echtzeit einen visuellen Hinweis auf den Fortschritt. Die Modularität des Codes stellt außerdem sicher, dass diese Funktionen problemlos an andere datengesteuerte Anwendungen angepasst werden können, was ihn zu einer flexiblen Lösung für Entwickler macht, die dynamische UI-Elemente implementieren möchten.

// HTML and SVG structure
<div id="labels"></div>
<svg width="200" height="200">
<circle id="circle" cx="100" cy="100" r="90" />
</svg>
// JavaScript to animate stroke-dashoffset
let labels = document.getElementById("labels");
const SubGoal = 50; // Total subscription goal
function updateProgress(data) {
  const SubCount = parseInt(data.split('/')[0]); // Extract number
  const SubPercent = SubCount / SubGoal; // Calculate percentage
  const SubPercentStroke = 450 - 450 * SubPercent; // Set stroke offset
  document.getElementById('circle').style.strokeDashoffset = SubPercentStroke;
}
// Example usage
fetch('subscribers.txt').then(response => response.text())
.then(data => updateProgress(data));

// Label rotation logic
var displaySettings = "RotatingDisplays";
var displayRotationSeconds = 2;
var displayRotationIndex = 0;
function rotateLabelDisplay() {
  if (displayRotationIndex >= labels.children.length) {
    displayRotationIndex = 0;
  }
  for (const label of labels.children) {
    label.style.visibility = 'hidden';
  }
  let label = labels.children[displayRotationIndex];
  label.style.visibility = 'visible';
  displayRotationIndex++;
  setTimeout(rotateLabelDisplay, displayRotationSeconds * 1000);
}
// Trigger rotation if display setting is enabled
if (displaySettings === "RotatingDisplays") {
  rotateLabelDisplay();
} else {
  labels.children[0].style.visibility = "visible";
}

Animationen mit JavaScript- und CSS-Variablen verbessern

Ein wichtiger Aspekt der Verwendung JavaScript Animationen zu steuern ist ihre Fähigkeit zur Interaktion CSS-Variablen. Mithilfe dieser Variablen können Entwickler wiederverwendbareren und einfacher zu wartenden Code erstellen. Anstatt beispielsweise Animationswerte wie „Stroke-Dashoffset“ direkt in JavaScript fest zu codieren, können Sie sie als CSS-Variablen definieren und sie mithilfe von JavaScript bearbeiten. Dies bietet eine sauberere Möglichkeit zur Verwaltung Ihrer Animationseigenschaften und macht Ihren Code modularer und skalierbarer.

Eine weitere leistungsstarke Funktion bei der Kombination von JavaScript mit CSS ist die Verwendung von Ereignis-Listenern. Ereignisgesteuerte Animationen können basierend auf Benutzerinteraktionen ausgelöst werden, etwa dem Klicken auf eine Schaltfläche oder dem Herunterscrollen einer Seite. In unserem Beispiel könnten Sie die Animation durch Hinzufügen von Interaktivität verbessern. Beispielsweise kann das Stroke-Dashoffset jedes Mal neu berechnet und dynamisch angewendet werden, wenn ein Benutzer ein Abonnement abschließt oder eine andere Aktion ausführt. Dadurch entsteht ein äußerst ansprechendes und interaktives Erlebnis, das auf Echtzeitdaten reagiert.

Zusätzlich kombinieren requestAnimationFrame Mit Keyframes ist eine weitere Möglichkeit, reibungslose und effiziente Animationen zu erstellen. Diese Methode stellt sicher, dass Animationen während des optimalen Repaint-Zyklus des Browsers ausgeführt werden, was eine bessere Leistung im Vergleich zu herkömmlichen setInterval oder setTimeout bietet. Diese Technik ist besonders nützlich, wenn es um häufige Animationen oder umfangreiche JavaScript-Prozesse geht, die andernfalls die Benutzeroberfläche verlangsamen könnten.