Animiranje ključnih okvirjev na podlagi dinamičnih vrednosti z JavaScriptom

Kako izračunati in animirati vrednosti ključnih okvirjev z uporabo JavaScripta

Pri izdelavi dinamičnih spletnih aplikacij lahko kombinacija JavaScripta z animacijami CSS ustvari gladke, vizualno privlačne prehode. Eden pogostih izzivov je animiranje elementov na podlagi vrednosti podatkov v realnem času. Odličen primer je ustvarjanje animacij ključnih okvirjev, ki odražajo trenutni odstotek vrstice napredka z uporabo SVG in stroke-dashoffset.

Ta tehnika je lahko še posebej uporabna, ko prikazujete dinamične vrednosti, kot je število naročnikov, kot v tem primeru, kjer se število naročnin posodablja v realnem času. Da bi animacija delovala brezhibno, lahko to število pretvorimo v odstotek in ga uporabimo neposredno v animaciji CSS.

Vendar pa je JavaScript lahko zmeden pri delu z animacijami CSS, zlasti pri izračunu vrednosti, kot so odstotki, za učinkovito manipulacijo ključnih sličic. V tem primeru je razumevanje, kako ekstrahirati in manipulirati z dinamičnimi podatki z JavaScriptom, ključnega pomena za zagotovitev, da vaše animacije odražajo pravilno vrednost.

Ta članek vas bo vodil skozi uporabo JavaScripta za odstranjevanje številskih podatkov, izračun odstotkov in njihovo uporabo na ključnih sličicah z uporabo lastnosti stroke-dashoffset. Na koncu boste jasno razumeli, kako lahko JavaScript in CSS sodelujeta pri ustvarjanju odzivnih animacij.

Animiranje krogov SVG z JavaScriptom: vodnik po korakih

V tem primeru smo ustvarili dinamično animacijo za krog SVG s kombinacijo JavaScripta in CSS. Glavni cilj je animirati napredek kroga za vizualno predstavitev števila naročnin v realnem času. Krog uporablja stroke-dashoffset Lastnost CSS, ki nadzoruje, kolikšen del poteze kroga je viden. JavaScript se uporablja za pridobivanje in izračun odstotka napredka in nato uporabo te vrednosti za potezo, kar omogoča gladko animacijo na podlagi podatkov v realnem času.

Ena od ključnih komponent je prinašati funkcijo, ki pridobi podatke iz datoteke ali strežnika, v tem primeru število naročnin. Skript izvleče numerični del podatkov z uporabo metod manipulacije nizov, kot je razdeli ()in pretvori rezultat v uporabno število z parseInt(). Če trenutno število naročnin delimo s ciljem, napredek izračunamo kot decimalno (odstotek). Ta odstotek se nato uporabi za stroke-dashoffset ustvariti vizualni učinek.

Drugi skript obravnava rotacijo nalepk, ki na zaslon doda plast dinamične vsebine. Oznake so dodane v DOM z uporabo cloneNode() metoda, ki podvaja obstoječo predlogo etikete. Vsaka nalepka se vrti v nastavljenem intervalu, ki ga nadzoruje setTimeout() funkcijo. Ta metoda sproži rotacijo po določeni zakasnitvi in ​​ustvari gladek prehod med oznakami, ne da bi zahtevala interakcijo uporabnika.

Kombinacija stroke-dashoffset za krog in skript za vrtenje nalepk ustvari privlačen uporabniški vmesnik. Z dinamičnim spreminjanjem napredka kroga in prikazanih oznak uporabnikom omogočimo vizualno indikacijo napredka v realnem času. Modularnost kode tudi zagotavlja, da je te funkcije mogoče enostavno prilagoditi drugim aplikacijam, ki temeljijo na podatkih, zaradi česar je prilagodljiva rešitev za razvijalce, ki želijo implementirati dinamične elemente uporabniškega vmesnika.

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

Izboljšanje animacij s spremenljivkami JavaScript in CSS

Eden od pomembnih vidikov uporabe JavaScript za nadzor animacij je njegova sposobnost interakcije z spremenljivke CSS. Te spremenljivke omogočajo razvijalcem, da ustvarijo kodo, ki jo je mogoče večkrat uporabiti in jo je enostavno vzdrževati. Na primer, namesto da bi vrednosti animacije, kot je stroke-dashoffset, vpisali neposredno v JavaScript, jih lahko definirate kot spremenljivke CSS in z njimi manipulirate z uporabo JavaScripta. To zagotavlja čistejši način za upravljanje vaših lastnosti animacije in naredi vašo kodo bolj modularno in razširljivo.

Druga močna funkcija pri kombiniranju JavaScripta s CSS je uporaba poslušalcev dogodkov. Animacije, ki temeljijo na dogodkih, se lahko sprožijo na podlagi uporabniških interakcij, kot je klik gumba ali pomikanje po strani navzdol. V našem primeru bi lahko izboljšali animacijo z dodajanjem interaktivnosti. Na primer, stroke-dashoffset je mogoče znova izračunati in uporabiti dinamično, kadar koli se uporabnik naroči ali izvede drugo dejanje. To ustvarja zelo privlačno in interaktivno izkušnjo, ki se odziva na podatke v realnem času.

Poleg tega združevanje requestAnimationFrame s ključnimi sličicami je še en način za ustvarjanje tekočih in učinkovitih animacij. Ta metoda zagotavlja, da se animacije izvajajo med optimalnim ciklom ponovnega barvanja brskalnika, kar zagotavlja boljšo zmogljivost v primerjavi s tradicionalnimi setInterval ali setTimeout. Ta tehnika je še posebej uporabna, ko imate opravka s pogostimi animacijami ali težkimi procesi JavaScript, ki sicer lahko upočasnijo uporabniški vmesnik.