Pagrindinių kadrų, pagrįstų dinaminėmis reikšmėmis, animavimas naudojant „JavaScript“.

Kaip apskaičiuoti ir animuoti pagrindinių kadrų reikšmes naudojant „JavaScript“.

Kuriant dinamines žiniatinklio programas, derinant „JavaScript“ su CSS animacijomis galima sukurti sklandžius, vizualiai patrauklius perėjimus. Vienas iš dažniausių iššūkių yra elementų animavimas pagal duomenų reikšmes realiuoju laiku. Puikus pavyzdys – sukurti pagrindinio kadro animaciją, atspindinčią dabartinę eigos juostos procentinę dalį, naudojant SVG ir brūkšnio-dashoffset.

Ši technika gali būti ypač naudinga, kai rodote dinamines reikšmes, pvz., prenumeratorių skaičių, kaip šiame pavyzdyje, kur prenumeratų skaičius atnaujinamas realiuoju laiku. Kad animacija veiktų sklandžiai, galime konvertuoti šį skaičių į procentą ir pritaikyti jį tiesiogiai CSS animacijai.

Tačiau „JavaScript“ gali sukelti painiavą, kai kalbama apie CSS animaciją, ypač skaičiuojant reikšmes, pvz., procentus, kad būtų galima efektyviai valdyti pagrindinius kadrus. Šiuo atveju labai svarbu suprasti, kaip išgauti dinaminius duomenis ir jais manipuliuoti naudojant „JavaScript“, kad animacijos atspindėtų teisingą vertę.

Šiame straipsnyje bus paaiškinta, kaip naudoti „JavaScript“ skaitmeniniams duomenims pašalinti, procentais ir pritaikyti juos pagrindiniams kadrams naudojant ypatybę „Street-dashoffset“. Pabaigoje aiškiai suprasite, kaip „JavaScript“ ir CSS gali veikti kartu kuriant interaktyvias animacijas.

SVG ratų animavimas naudojant „JavaScript“: nuoseklus vadovas

Šiame pavyzdyje sukūrėme dinaminę animaciją SVG ratui naudodami JavaScript ir CSS derinį. Pagrindinis tikslas – animuoti rato eigą, kad būtų galima vizualiai parodyti prenumeratų skaičių realiuoju laiku. Apskritimas naudoja insultas-dashoffset CSS ypatybė, kuri valdo, kiek apskritimo brūkšnio matoma. „JavaScript“ naudojamas norint gauti ir apskaičiuoti pažangos procentą, o tada taikyti šią reikšmę potėpiui, kad būtų galima sklandžiai animuoti, remiantis realaus laiko duomenimis.

Vienas iš pagrindinių komponentų yra atnešti funkcija, kuri nuskaito duomenis iš failo arba serverio, šiuo atveju – prenumeratų skaičių. Scenarijus ištraukia skaitinę duomenų dalį naudodamas manipuliavimo eilutėmis metodus, pvz padalinti (), ir konvertuoja rezultatą į naudingą skaičių su parseInt(). Padalinę esamą prenumeratų skaičių iš tikslo, pažangą apskaičiuojame dešimtainiu tikslumu (procentais). Tada šis procentas taikomas insultas-dashoffset sukurti vizualinį efektą.

Antrasis scenarijus tvarko etikečių pasukimą, kuris prideda ekranui dinamiško turinio sluoksnį. Etiketės pridedamos prie DOM naudojant klono mazgas () metodas, kuris dubliuoja esamą etiketės šabloną. Kiekviena etiketė pasukama nustatytu intervalu, kurį valdo setTimeout() funkcija. Šis metodas suaktyvina pasukimą po nurodyto uždelsimo, sukuriant sklandų perėjimą tarp etikečių, nereikalaujant vartotojo sąveikos.

Derinys iš insultas-dashoffset apskritimui ir etiketės pasukimo scenarijus sukuria patrauklią vartotojo sąsają. Dinamiškai keisdami apskritimo eigą ir rodomas etiketes, vartotojams suteikiame vaizdinį progreso nurodymą realiuoju laiku. Kodo moduliškumas taip pat užtikrina, kad šias funkcijas būtų galima lengvai pritaikyti kitoms duomenimis pagrįstoms programoms, todėl tai yra lankstus sprendimas kūrėjams, norintiems įdiegti dinaminius vartotojo sąsajos elementus.

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

Animacijų tobulinimas naudojant JavaScript ir CSS kintamuosius

Vienas svarbus naudojimo aspektas JavaScript valdyti animacijas yra jos gebėjimas bendrauti su CSS kintamieji. Šie kintamieji leidžia kūrėjams sukurti daugiau daugkartinio naudojimo ir lengvai prižiūrimą kodą. Pavyzdžiui, užuot kodinę animacijos reikšmes, pvz., insulto-dashoffset, tiesiogiai į „JavaScript“, galite apibrėžti jas kaip CSS kintamuosius ir manipuliuoti jais naudodami „JavaScript“. Tai suteikia švaresnį būdą valdyti animacijos ypatybes ir daro jūsų kodą moduliškesnį ir keičiamo dydžio.

Kita galinga funkcija derinant JavaScript su CSS yra įvykių klausytojų naudojimas. Įvykiais pagrįstos animacijos gali suaktyvėti atsižvelgiant į naudotojo sąveiką, pvz., mygtuko paspaudimą arba puslapio slinkimą žemyn. Mūsų pavyzdyje galite patobulinti animaciją pridėdami interaktyvumo. Pavyzdžiui, brūkšnelių poslinkis gali būti perskaičiuotas ir dinamiškai taikomas, kai vartotojas užsiprenumeruoja arba atlieka kitą veiksmą. Taip sukuriama labai patraukli ir interaktyvi patirtis, reaguojanti į duomenis realiuoju laiku.

Be to, derinant requestAnimationFrame naudojant pagrindinius kadrus – dar vienas būdas sukurti sklandžią ir efektyvią animaciją. Šis metodas užtikrina, kad animacijos būtų atliekamos per optimalų naršyklės perdažymo ciklą, o tai užtikrina geresnį našumą, palyginti su tradiciniu setInterval arba setTimeout. Ši technika ypač naudinga dirbant su dažnomis animacijomis arba sunkiais „JavaScript“ procesais, kurie kitu atveju gali sulėtinti vartotojo sąsają.