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.

Kommando	Exempel på användning
fetch()	Metoden fetch() används för att begära data från en resurs (t.ex. textfil, API). I det här skriptet används det för att hämta abonnentdata från en textfil för bearbetning i förloppsindikatorn.
parseInt()	Funktionen parseInt() konverterar en sträng till ett heltal. Här tar den bort värdet före snedstrecket (t.ex. 42/50) för att få det aktuella antalet prenumeranter.
split()	Metoden split() delar upp en sträng i en array baserat på en avgränsare. I det här fallet använder den '/' för att separera det aktuella antalet prenumeranter från målet (42 från 42/50).
strokeDashoffset	strokeDashoffset är ett SVG-attribut som styr hur ett slag ritas. Den manipuleras här för att dynamiskt ändra SVG-cirkelns fyllning baserat på prenumerationsprocenten.
setTimeout()	Denna metod anropar en funktion efter en angiven fördröjning. Den används här för att ställa in intervallet för att rotera etiketterna, så att nya etiketter visas efter några sekunder.
cloneNode()	cloneNode(true) används för att skapa en kopia av en nod, inklusive dess underordnade. Detta är viktigt för att duplicera etikettmallen och lägga till den dynamiskt i DOM.
visibility	Denna CSS-egenskap styrs via JavaScript för att dölja eller visa etiketter. Det säkerställer att endast en etikett är synlig åt gången under rotationen.
strokeDasharray	strokeDasharray definierar mönstret av streck och luckor i en SVG-linje. Den är inställd på ett specifikt värde (450) för att matcha cirkelns omkrets, som är animerad med strokeDashoffset.

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 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 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 , och konverterar resultatet till ett användbart tal med . 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 metod, som duplicerar en befintlig etikettmall. Varje etikett roteras med ett visst intervall, som styrs av 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 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 att styra animationer är dess förmåga att interagera med . 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 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.

1. Hur gör påverka SVG-animationer?
2. De styr hur mycket av SVG-banans linje som är synlig. Att ändra dess värde möjliggör smidiga framstegsliknande animationer.
3. Vad är rollen för i realtidsanimationer?
4. används för att hämta data från ett API eller en fil. I animationer hjälper detta till att ladda dynamiska värden som antalet prenumeranter, som sedan kan animeras på skärmen.
5. Burk användas för att styra animationsintervall?
6. Ja, kan användas för att introducera fördröjningar i animationer, som att rotera etiketter med intervaller.
7. Vad är syftet med i JavaScript-animationsskript?
8. konverterar en sträng (som "42/50") till ett heltal, vilket är nödvändigt för att beräkna procentsatser i dynamiska animationer.
9. Varför ska jag använda i stället för ?
10. är optimerad för animationer, vilket säkerställer smidigare övergångar genom att synkronisera dem med webbläsarens ommålningscykel.

Kombinerande med CSS möjliggör kraftfulla och dynamiska animationer som kan svara på realtidsdata. Genom att förstå hur man beräknar värden som procentsatser och tillämpar dem på nyckelbildsanimationer kan du skapa engagerande och lyhörda användargränssnitt som återspeglar liveframsteg eller datauppdateringar.

Med de tekniker som behandlas i den här guiden kan du enkelt manipulera egenskaper som för SVG-animationer och rotera element dynamiskt. Denna kombination ger en skalbar lösning för utvecklare som vill integrera dynamiska animationer i sina projekt med realtidsdatainmatning.