Animera nyckelbildrutor baserade på dynamiska värden med JavaScript

Hur man beräknar och animerar nyckelbildsvärden med JavaScript

När du bygger dynamiska webbapplikationer kan en kombination av JavaScript med CSS-animationer skapa smidiga, visuellt tilltalande övergångar. En vanlig utmaning är att animera element baserat på realtidsdatavärden. Ett bra exempel är att skapa keyframe-animationer som återspeglar en förloppsindikators nuvarande procentandel med SVG och stroke-dashoffset.

Den här tekniken kan vara särskilt användbar när du visar dynamiska värden som ett antal prenumeranter, som i det här exemplet där antalet prenumerationer uppdateras i realtid. För att få animationen att fungera sömlöst kan vi konvertera denna siffra till en procentsats och applicera den direkt på CSS-animationen.

JavaScript kan dock vara förvirrande när man hanterar CSS-animationer, särskilt när man beräknar värden som procentsatser för att effektivt manipulera nyckelbildrutor. I det här fallet är det viktigt att förstå hur man extraherar och manipulerar dynamisk data med JavaScript för att säkerställa att dina animationer återspeglar det korrekta värdet.

Den här artikeln guidar dig genom att använda JavaScript för att ta bort numerisk data, beräkna procentsatser och tillämpa dem på nyckelbildrutor med egenskapen stroke-dashoffset. I slutet kommer du att ha en klar förståelse för hur JavaScript och CSS kan samverka för att skapa responsiva animationer.

Animera SVG-cirklar med JavaScript: En steg-för-steg-guide

I det här exemplet skapade vi en dynamisk animation för en SVG-cirkel med en kombination av JavaScript och CSS. Huvudmålet är att animera framstegen för en cirkel för att visuellt representera antalet prenumerationer i realtid. Cirkeln använder slag-streckförskjutning CSS-egenskap, som styr hur mycket av cirkelns streck som är synligt. JavaScript används för att hämta och beräkna andelen framsteg och sedan tillämpa det värdet på strecket, vilket möjliggör smidig animering baserad på realtidsdata.

En nyckelkomponent är hämta funktion, som hämtar data från en fil eller server, i detta fall prenumerationsräkningen. Skriptet extraherar den numeriska delen av data genom att använda strängmanipulationsmetoder som split(), och konverterar resultatet till ett användbart tal med parseInt(). Genom att dividera det aktuella antalet prenumerationer med målet, beräknar vi framstegen som en decimal (procent). Denna procentsats tillämpas sedan på slag-streckförskjutning för att skapa den visuella effekten.

Det andra skriptet hanterar etikettrotation, vilket lägger till ett lager av dynamiskt innehåll till displayen. Etiketter läggs till i DOM med hjälp av cloneNode() metod, som duplicerar en befintlig etikettmall. Varje etikett roteras med ett visst intervall, som styrs av setTimeout() fungera. Den här metoden utlöser rotationen efter en angiven fördröjning, vilket skapar en smidig övergång mellan etiketterna utan att användarinteraktion krävs.

Kombinationen av slag-streckförskjutning för cirkeln och etikettrotationsskriptet skapar ett engagerande användargränssnitt. Genom att dynamiskt ändra både cirkelns framsteg och etiketterna som visas ger vi användarna en visuell indikation på framsteg i realtid. Modulariteten hos koden säkerställer också att dessa funktioner lätt kan anpassas till andra datadrivna applikationer, vilket gör den till en flexibel lösning för utvecklare som vill implementera dynamiska UI-element.

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

Förbättra animationer med JavaScript och CSS-variabler

En viktig aspekt av att använda JavaScript att styra animationer är dess förmåga att interagera med CSS-variabler. Dessa variabler tillåter utvecklare att skapa mer återanvändbar och lätt underhållbar kod. Till exempel, istället för att hårdkoda animationsvärden som stroke-dashoffset direkt i JavaScript, kan du definiera dem som CSS-variabler och manipulera dem med JavaScript. Detta ger ett renare sätt att hantera dina animeringsegenskaper och gör din kod mer modulär och skalbar.

En annan kraftfull funktion när man kombinerar JavaScript med CSS är användningen av händelseavlyssnare. Händelsedrivna animationer kan utlösas baserat på användarinteraktioner, som att klicka på en knapp eller rulla ner på en sida. I vårt exempel kan du förbättra animeringen genom att lägga till interaktivitet. Slag-streckförskjutningen kan till exempel beräknas om och tillämpas dynamiskt närhelst en användare prenumererar eller utför en annan åtgärd. Detta skapar en mycket engagerande och interaktiv upplevelse som svarar på realtidsdata.

Dessutom kombinera requestAnimationFrame med keyframes är ett annat sätt att skapa smidiga och effektiva animationer. Denna metod säkerställer att animationer utförs under webbläsarens optimala ommålningscykel, vilket ger bättre prestanda jämfört med traditionell setInterval eller setTimeout. Den här tekniken är särskilt användbar när du hanterar frekventa animationer eller tunga JavaScript-processer som annars kan sakta ner användargränssnittet.