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.

Befehl	Anwendungsbeispiel
fetch()	Die fetch()-Methode wird verwendet, um Daten von einer Ressource (z. B. Textdatei, API) anzufordern. In diesem Skript werden Abonnentendaten aus einer Textdatei zur Verarbeitung im Fortschrittsbalken abgerufen.
parseInt()	Die Funktion parseInt() wandelt einen String in eine Ganzzahl um. Hier wird der Wert vor dem Schrägstrich entfernt (z. B. 42/50), um die aktuelle Abonnentenzahl zu erhalten.
split()	Die Methode split() teilt einen String basierend auf einem Trennzeichen in ein Array auf. In diesem Fall wird „/“ verwendet, um die aktuelle Abonnentenzahl vom Ziel zu trennen (42 von 42/50).
strokeDashoffset	StrokeDashoffset ist ein SVG-Attribut, das steuert, wie ein Strich gezeichnet wird. Hier wird es manipuliert, um die Füllung des SVG-Kreises basierend auf dem Abonnementprozentsatz dynamisch zu ändern.
setTimeout()	Diese Methode ruft eine Funktion nach einer angegebenen Verzögerung auf. Hier wird das Intervall für das Drehen der Etiketten eingestellt, sodass nach einigen Sekunden neue Etiketten erscheinen.
cloneNode()	cloneNode(true) wird verwendet, um eine Kopie eines Knotens einschließlich seiner untergeordneten Knoten zu erstellen. Dies ist wichtig, um die Etikettenvorlage zu duplizieren und dynamisch zum DOM hinzuzufügen.
visibility	Diese CSS-Eigenschaft wird über JavaScript gesteuert, um Beschriftungen auszublenden oder anzuzeigen. Dadurch wird sichergestellt, dass während der Drehung jeweils nur ein Etikett sichtbar ist.
strokeDasharray	StrokeDasharray definiert das Muster aus Strichen und Lücken in einem SVG-Strich. Es wird auf einen bestimmten Wert (450) eingestellt, um mit dem Umfang des Kreises übereinzustimmen, der mit „StrokeDashoffset“ animiert wird.

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 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 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 , und wandelt das Ergebnis mit in eine verwendbare Zahl um . 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 Methode, die eine vorhandene Etikettenvorlage dupliziert. Jedes Etikett wird in einem festgelegten Intervall gedreht, das von gesteuert wird 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 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 Animationen zu steuern ist ihre Fähigkeit zur Interaktion . 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 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.

1. Wie funktioniert Auswirkungen auf SVG-Animationen?
2. Der steuert, wie viel vom SVG-Pfadstrich sichtbar ist. Das Ändern seines Werts ermöglicht reibungslose, fortschrittsähnliche Animationen.
3. Was ist die Rolle von in Echtzeitanimationen?
4. wird verwendet, um Daten von einer API oder Datei abzurufen. In Animationen hilft dies dabei, dynamische Werte wie Abonnentenzahlen zu laden, die dann auf dem Bildschirm animiert werden können.
5. Kann zur Steuerung von Animationsintervallen verwendet werden?
6. Ja, kann verwendet werden, um Verzögerungen in Animationen einzuführen, z. B. durch das Drehen von Beschriftungen in bestimmten Abständen.
7. Was ist der Zweck von in JavaScript-Animationsskripten?
8. wandelt eine Zeichenfolge (z. B. „42/50“) in eine Ganzzahl um, die für die Berechnung von Prozentsätzen in dynamischen Animationen erforderlich ist.
9. Warum sollte ich verwenden anstatt ?
10. ist für Animationen optimiert und sorgt durch die Synchronisierung mit dem Repaint-Zyklus des Browsers für flüssigere Übergänge.

Kombinieren mit CSS ermöglicht leistungsstarke und dynamische Animationen, die auf Echtzeitdaten reagieren können. Wenn Sie verstehen, wie Werte wie Prozentsätze berechnet und auf Keyframe-Animationen angewendet werden, können Sie ansprechende und reaktionsfähige Benutzeroberflächen erstellen, die Live-Fortschritte oder Datenaktualisierungen widerspiegeln.

Mit den in diesem Handbuch behandelten Techniken können Sie Eigenschaften wie z. B. ganz einfach manipulieren für SVG-Animationen und drehen Sie Elemente dynamisch. Diese Kombination bietet eine skalierbare Lösung für Entwickler, die dynamische Animationen mit Echtzeit-Dateneingaben in ihre Projekte integrieren möchten.