Dünaamilistel väärtustel põhinevate võtmekaadrite animeerimine JavaScriptiga

Kuidas arvutada ja animeerida võtmekaadri väärtusi JavaScripti abil

Dünaamiliste veebirakenduste loomisel võib JavaScripti kombineerimine CSS-animatsioonidega luua sujuvaid ja visuaalselt meeldivaid üleminekuid. Üks levinud väljakutse on reaalajas andmeväärtustel põhinevate elementide animeerimine. Suurepärane näide on võtmekaadri animatsioonide loomine, mis kajastavad edenemisriba praegust protsenti, kasutades SVG-d ja joone-dashoffset.

See tehnika võib olla eriti kasulik dünaamiliste väärtuste (nt tellijate arvu) kuvamisel, nagu selles näites, kus tellimuste arv värskendatakse reaalajas. Animatsiooni sujuvaks toimimiseks saame selle arvu teisendada protsendiks ja rakendada selle otse CSS-animatsioonile.

Kuid JavaScript võib CSS-animatsioonidega tegelemisel segadust tekitada, eriti kui arvutate võtmekaadrite tõhusaks manipuleerimiseks väärtusi, näiteks protsenti. Sel juhul on oluline mõista, kuidas JavaScripti abil dünaamilisi andmeid ekstraheerida ja nendega manipuleerida, et tagada teie animatsioonide õige väärtus.

See artikkel juhendab teid, kuidas kasutada JavaScripti numbriliste andmete eemaldamiseks, protsentide arvutamiseks ja nende rakendamiseks võtmekaadritele, kasutades atribuuti insult-dashoffset. Lõpuks saate selgelt aru, kuidas JavaScript ja CSS saavad reageerivate animatsioonide loomiseks koos töötada.

SVG-ringide animeerimine JavaScriptiga: samm-sammult juhend

Selles näites lõime SVG-ringi jaoks dünaamilise animatsiooni, kasutades JavaScripti ja CSS-i kombinatsiooni. Peamine eesmärk on animeerida ringi edenemist, et kuvada visuaalselt tellimuste arvu reaalajas. Ring kasutab löök-kriips CSS-i omadus, mis määrab, kui suur osa ringi joonest on nähtav. JavaScripti kasutatakse edenemise protsendi toomiseks ja arvutamiseks ning seejärel selle väärtuse rakendamiseks joonele, võimaldades reaalajas andmetel põhinevat sujuvat animatsiooni.

Üks põhikomponent on tooma funktsioon, mis hangib failist või serverist andmed, antud juhul tellimuste arvu. Skript ekstraheerib andmete numbrilise osa, kasutades stringiga manipuleerimise meetodeid, nagu split ()ja teisendab tulemuse kasutatavaks arvuks koos parseInt(). Jagades praeguse tellimuste arvu eesmärgiga, arvutame edenemise kümnendkohana (protsendina). Seejärel rakendatakse seda protsenti löök-kriips visuaalse efekti loomiseks.

Teine skript tegeleb siltide pööramisega, mis lisab kuvale dünaamilise sisu kihi. Sildid lisatakse DOM-ile, kasutades cloneNode() meetod, mis dubleerib olemasoleva sildimalli. Iga silti pööratakse määratud intervalliga, mida juhib setTimeout() funktsiooni. See meetod käivitab pööramise pärast määratud viivitust, luues sujuva ülemineku siltide vahel, ilma et oleks vaja kasutaja sekkumist.

Kombinatsioon löök-kriips ringi ja sildi pööramise skript loob köitva kasutajaliidese. Muutes dünaamiliselt nii ringi edenemist kui ka kuvatavaid silte, anname kasutajatele reaalajas visuaalse ülevaate edenemisest. Koodi modulaarsus tagab ka selle, et neid funktsioone saab hõlpsasti kohandada muude andmepõhiste rakendustega, muutes selle paindlikuks lahenduseks arendajatele, kes soovivad rakendada dünaamilisi kasutajaliidese elemente.

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

Animatsioonide täiustamine JavaScripti ja CSS-i muutujatega

Üks oluline kasutamise aspekt JavaScript animatsioonide juhtimine on selle võime nendega suhelda CSS-i muutujad. Need muutujad võimaldavad arendajatel luua rohkem korduvkasutatavat ja hõlpsamini hooldatavat koodi. Näiteks animatsiooniväärtuste (nt insult-dashoffset) otse JavaScripti sisestamise asemel saate need defineerida CSS-i muutujatena ja manipuleerida nendega JavaScripti abil. See annab puhtama viisi animatsiooni atribuutide haldamiseks ning muudab koodi modulaarsemaks ja skaleeritavamaks.

Teine võimas funktsioon JavaScripti kombineerimisel CSS-iga on sündmuste kuulajate kasutamine. Sündmuspõhised animatsioonid võivad käivituda kasutaja interaktsioonide (nt nupul klõpsamise või lehe alla kerimise) põhjal. Meie näites saate interaktiivsuse lisamisega animatsiooni täiustada. Näiteks saab joone-kriipsu nihke ümber arvutada ja dünaamiliselt rakendada, kui kasutaja tellib või sooritab mõne muu toimingu. See loob väga kaasahaarava ja interaktiivse kogemuse, mis reageerib reaalajas andmetele.

Lisaks kombineerides requestAnimationFrame võtmekaadritega on veel üks viis sujuvate ja tõhusate animatsioonide loomiseks. See meetod tagab, et animatsioone tehakse brauseri optimaalse ümbervärvimistsükli ajal, pakkudes paremat jõudlust võrreldes traditsioonilise setIntervali või setTimeoutiga. See tehnika on eriti kasulik, kui tegelete sagedaste animatsioonide või raskete JavaScripti protsessidega, mis muidu võivad kasutajaliidest aeglustada.