Animering av nøkkelrammer basert på dynamiske verdier med JavaScript

Hvordan beregne og animere nøkkelbildeverdier ved hjelp av JavaScript

Når du bygger dynamiske nettapplikasjoner, kan kombinasjon av JavaScript med CSS-animasjoner skape jevne, visuelt tiltalende overganger. En vanlig utfordring er å animere elementer basert på sanntidsdataverdier. Et godt eksempel er å lage keyframe-animasjoner som gjenspeiler en fremdriftslinjes gjeldende prosentandel ved å bruke SVG og stroke-dashoffset.

Denne teknikken kan være spesielt nyttig når du viser dynamiske verdier som et antall abonnenter, som i dette eksemplet hvor antall abonnementer oppdateres i sanntid. For å få animasjonen til å fungere sømløst, kan vi konvertere dette tallet til en prosentandel og bruke det direkte på CSS-animasjonen.

JavaScript kan imidlertid være forvirrende når du arbeider med CSS-animasjoner, spesielt når du beregner verdier som prosenter for å manipulere nøkkelbilder effektivt. I dette tilfellet er det avgjørende å forstå hvordan du trekker ut og manipulerer dynamiske data med JavaScript for å sikre at animasjonene reflekterer riktig verdi.

Denne artikkelen vil veilede deg gjennom bruken av JavaScript for å fjerne numeriske data, beregne prosenter og bruke dem på nøkkelbilder ved å bruke egenskapen stroke-dashoffset. På slutten vil du ha en klar forståelse av hvordan JavaScript og CSS kan fungere sammen for å lage responsive animasjoner.

Kommando	Eksempel på bruk
fetch()	Fetch()-metoden brukes til å be om data fra en ressurs (f.eks. tekstfil, API). I dette skriptet brukes det til å hente abonnentdata fra en tekstfil for behandling i fremdriftslinjen.
parseInt()	Funksjonen parseInt() konverterer en streng til et heltall. Her fjerner den verdien før skråstreken (f.eks. 42/50) for å få gjeldende abonnentantall.
split()	Split()-metoden deler en streng i en matrise basert på et skilletegn. I dette tilfellet bruker den '/' for å skille gjeldende antall abonnenter fra målet (42 fra 42/50).
strokeDashoffset	strokeDashoffset er et SVG-attributt som kontrollerer hvordan et slag tegnes. Det manipuleres her for å dynamisk endre SVG-sirkelens fylling basert på abonnementsprosenten.
setTimeout()	Denne metoden kaller opp en funksjon etter en spesifisert forsinkelse. Den brukes her for å angi intervallet for å rotere etikettene, slik at nye etiketter vises etter noen sekunder.
cloneNode()	cloneNode(true) brukes til å lage en kopi av en node, inkludert dens barn. Dette er viktig for å duplisere etikettmalen og legge den til i DOM dynamisk.
visibility	Denne CSS-egenskapen styres via JavaScript for å skjule eller vise etiketter. Det sikrer at kun én etikett er synlig om gangen under rotasjon.
strokeDasharray	strokeDasharray definerer mønsteret av streker og mellomrom i et SVG-strøk. Den er satt til en spesifikk verdi (450) for å matche sirkelens omkrets, som er animert med strokeDashoffset.

Animering av SVG-sirkler med JavaScript: En trinn-for-trinn-veiledning

I dette eksemplet laget vi en dynamisk animasjon for en SVG-sirkel ved å bruke en kombinasjon av JavaScript og CSS. Hovedmålet er å animere fremdriften til en sirkel for å visuelt representere antallet abonnementer i sanntid. Sirkelen bruker CSS-egenskap, som kontrollerer hvor mye av sirkelens strek som er synlig. JavaScript brukes til å hente og beregne fremdriftsprosenten og deretter bruke den verdien på streken, noe som muliggjør jevn animasjon basert på sanntidsdata.

En nøkkelkomponent er funksjon, som henter data fra en fil eller server, i dette tilfellet abonnementsantallet. Skriptet trekker ut den numeriske delen av dataene ved å bruke strengmanipuleringsmetoder som , og konverterer resultatet til et brukbart tall med . Ved å dele gjeldende abonnementstall på målet, beregner vi fremdriften som en desimal (prosent). Denne prosentandelen brukes deretter på slag-dashoffset for å skape den visuelle effekten.

Det andre skriptet håndterer etikettrotasjon, som legger til et lag med dynamisk innhold på skjermen. Etiketter legges til DOM ved hjelp av metode, som dupliserer en eksisterende etikettmal. Hver etikett roteres med et bestemt intervall, som kontrolleres av funksjon. Denne metoden utløser rotasjonen etter en spesifisert forsinkelse, og skaper en jevn overgang mellom etiketter uten å kreve brukerinteraksjon.

Kombinasjonen av for sirkelen og etikettrotasjonsskriptet skaper et engasjerende brukergrensesnitt. Ved å dynamisk endre både fremdriften til sirkelen og etikettene som vises, gir vi brukerne en visuell indikasjon på fremdriften i sanntid. Modulariteten til koden sikrer også at disse funksjonene enkelt kan tilpasses til andre datadrevne applikasjoner, noe som gjør den til en fleksibel løsning for utviklere som ønsker å 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";
}

Forbedre animasjoner med JavaScript og CSS-variabler

Et viktig aspekt ved bruk å kontrollere animasjoner er dens evne til å samhandle med . Disse variablene lar utviklere lage mer gjenbrukbar og lett vedlikeholdbar kode. For eksempel, i stedet for å hardkode animasjonsverdier som stroke-dashoffset direkte inn i JavaScript, kan du definere dem som CSS-variabler og manipulere dem ved hjelp av JavaScript. Dette gir en renere måte å administrere animasjonsegenskapene og gjør koden din mer modulær og skalerbar.

En annen kraftig funksjon når du kombinerer JavaScript med CSS er bruken av hendelseslyttere. Hendelsesdrevne animasjoner kan utløses basert på brukerinteraksjoner, som å klikke på en knapp eller rulle nedover en side. I vårt eksempel kan du forbedre animasjonen ved å legge til interaktivitet. For eksempel kan strek-dashoffset beregnes på nytt og brukes dynamisk hver gang en bruker abonnerer eller utfører en annen handling. Dette skaper en svært engasjerende og interaktiv opplevelse som reagerer på sanntidsdata.

I tillegg kombinere med keyframes er en annen måte å lage jevne og effektive animasjoner på. Denne metoden sikrer at animasjoner utføres under nettleserens optimale malingssyklus, og gir bedre ytelse sammenlignet med tradisjonell setInterval eller setTimeout. Denne teknikken er spesielt nyttig når du arbeider med hyppige animasjoner eller tunge JavaScript-prosesser som ellers kan redusere brukergrensesnittet.

1. Hvordan gjør det påvirke SVG-animasjoner?
2. De kontrollerer hvor mye av SVG-banens strek som er synlig. Endring av verdien gir jevne fremdriftslignende animasjoner.
3. Hva er rollen til i sanntidsanimasjoner?
4. brukes til å hente data fra en API eller fil. I animasjoner hjelper dette med å laste dynamiske verdier som antall abonnenter, som deretter kan animeres på skjermen.
5. Kan brukes til å kontrollere animasjonsintervaller?
6. Ja, kan brukes til å introdusere forsinkelser i animasjoner, for eksempel roterende etiketter med intervaller.
7. Hva er hensikten med i JavaScript-animasjonsskript?
8. konverterer en streng (som "42/50") til et heltall, som er nødvendig for å beregne prosenter i dynamiske animasjoner.
9. Hvorfor skal jeg bruke istedenfor ?
10. er optimalisert for animasjoner, og sikrer jevnere overganger ved å synkronisere dem med nettleserens malingssyklus.

Kombinere med CSS muliggjør kraftige og dynamiske animasjoner som kan svare på sanntidsdata. Ved å forstå hvordan du beregner verdier som prosenter og bruker dem på keyframe-animasjoner, kan du lage engasjerende og responsive brukergrensesnitt som gjenspeiler fremdrift eller dataoppdateringer.

Med teknikkene som dekkes i denne veiledningen, kan du enkelt manipulere egenskaper som for SVG-animasjoner og roter elementer dynamisk. Denne kombinasjonen gir en skalerbar løsning for utviklere som ønsker å integrere dynamiske animasjoner i sine prosjekter med sanntidsdatainndata.