Animering af nøglerammer baseret på dynamiske værdier med JavaScript

Sådan beregnes og animeres keyframe-værdier ved hjælp af JavaScript

Når du bygger dynamiske webapplikationer, kan en kombination af JavaScript med CSS-animationer skabe jævne, visuelt tiltalende overgange. En fælles udfordring er at animere elementer baseret på dataværdier i realtid. Et godt eksempel er at skabe keyframe-animationer, der afspejler en statuslinjes aktuelle procentdel ved hjælp af SVG og streg-dashoffset.

Denne teknik kan være særlig nyttig, når du viser dynamiske værdier som et antal abonnenter, som i dette eksempel, hvor antallet af abonnementer opdateres i realtid. For at få animationen til at fungere problemfrit kan vi konvertere dette tal til en procentdel og anvende det direkte på CSS-animationen.

JavaScript kan dog være forvirrende, når man har at gøre med CSS-animationer, især når man beregner værdier som procenter for at manipulere keyframes effektivt. I dette tilfælde er det afgørende at forstå, hvordan man udtrækker og manipulerer dynamiske data med JavaScript for at sikre, at dine animationer afspejler den korrekte værdi.

Denne artikel vil guide dig gennem brugen af ​​JavaScript til at fjerne numeriske data, beregne procenter og anvende dem på keyframes ved hjælp af egenskaben streg-dashoffset. Til sidst vil du have en klar forståelse af, hvordan JavaScript og CSS kan arbejde sammen for at skabe responsive animationer.

Animering af SVG-cirkler med JavaScript: En trin-for-trin guide

I dette eksempel oprettede vi en dynamisk animation til en SVG-cirkel ved hjælp af en kombination af JavaScript og CSS. Hovedmålet er at animere en cirkels fremskridt, så den visuelt repræsenterer antallet af abonnementer i realtid. Cirklen bruger slag-stregforskydning CSS-egenskab, som styrer, hvor meget af cirklens streg, der er synligt. JavaScript bruges til at hente og beregne procentdelen af ​​fremskridt og derefter anvende denne værdi på stregen, hvilket giver mulighed for jævn animation baseret på realtidsdata.

En nøglekomponent er hente funktion, som henter data fra en fil eller server, i dette tilfælde abonnementsantallet. Scriptet udtrækker den numeriske del af dataene ved at bruge strengmanipulationsmetoder som f.eks dele(), og konverterer resultatet til et brugbart tal med parseInt(). Ved at dividere det aktuelle abonnementantal med målet, beregner vi fremskridtet som en decimal (procent). Denne procentsats anvendes derefter på slag-stregforskydning at skabe den visuelle effekt.

Det andet script håndterer etiketrotation, som tilføjer et lag af dynamisk indhold til skærmen. Etiketter føjes til DOM ved hjælp af cloneNode() metode, som dublerer en eksisterende etiketskabelon. Hver etiket roteres med et bestemt interval, som styres af setTimeout() fungere. Denne metode udløser rotationen efter en specificeret forsinkelse, hvilket skaber en jævn overgang mellem etiketter uden at kræve brugerinteraktion.

Kombinationen af slag-stregforskydning for cirklen og etiketrotationsscriptet skaber en engagerende brugergrænseflade. Ved dynamisk at ændre både fremdriften af ​​cirklen og de etiketter, der vises, giver vi brugerne en visuel indikation af fremskridt i realtid. Modulariteten af ​​koden sikrer også, at disse funktioner nemt kan tilpasses til andre datadrevne applikationer, hvilket gør den til en fleksibel løsning for udviklere, der ønsker at implementere dynamiske UI-elementer.

// 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";
}

Forbedring af animationer med JavaScript og CSS-variabler

Et vigtigt aspekt ved at bruge JavaScript at styre animationer er dens evne til at interagere med CSS variabler. Disse variabler giver udviklere mulighed for at skabe mere genbrugelig og let vedligeholdelig kode. For eksempel, i stedet for at hardkode animationsværdier som stroke-dashoffset direkte i JavaScript, kan du definere dem som CSS-variabler og manipulere dem ved hjælp af JavaScript. Dette giver en renere måde at administrere dine animationsegenskaber på og gør din kode mere modulær og skalerbar.

En anden kraftfuld funktion, når JavaScript kombineres med CSS, er brugen af ​​begivenhedslyttere. Hændelsesdrevne animationer kan udløses baseret på brugerinteraktioner, som at klikke på en knap eller rulle ned på en side. I vores eksempel kan du forbedre animationen ved at tilføje interaktivitet. For eksempel kan streg-dashoffset genberegnes og anvendes dynamisk, når en bruger abonnerer eller udfører en anden handling. Dette skaber en meget engagerende og interaktiv oplevelse, der reagerer på realtidsdata.

Derudover at kombinere requestAnimationFrame med keyframes er en anden måde at skabe glatte og effektive animationer. Denne metode sikrer, at animationer udføres under browserens optimale genmalingscyklus, hvilket giver bedre ydeevne sammenlignet med traditionelle setInterval eller setTimeout. Denne teknik er især nyttig, når du har at gøre med hyppige animationer eller tunge JavaScript-processer, der ellers kan bremse brugergrænsefladen.