Dynaamisiin arvoihin perustuvien avainkehysten animointi JavaScriptillä

Avainkehysarvojen laskeminen ja animointi JavaScriptin avulla

Kun rakennat dynaamisia verkkosovelluksia, JavaScriptin yhdistäminen CSS-animaatioihin voi luoda sileitä, visuaalisesti houkuttelevia siirtymiä. Yksi yleinen haaste on animoida elementtejä reaaliaikaisten dataarvojen perusteella. Hyvä esimerkki on luoda avainkehysanimaatioita, jotka kuvastavat edistymispalkin nykyistä prosenttiosuutta käyttämällä SVG:tä ja viiva-dashoffsetia.

Tämä tekniikka voi olla erityisen hyödyllinen, kun näytät dynaamisia arvoja, kuten tilaajamäärää, kuten tässä esimerkissä, jossa tilausten määrä päivittyy reaaliajassa. Jotta animaatio toimisi saumattomasti, voimme muuntaa tämän luvun prosentteiksi ja soveltaa sitä suoraan CSS-animaatioon.

JavaScript voi kuitenkin olla hämmentävä käsiteltäessä CSS-animaatioita, varsinkin kun lasketaan arvoja, kuten prosenttiosuuksia, jotta avainkehystä voidaan käsitellä tehokkaasti. Tässä tapauksessa on tärkeää ymmärtää, kuinka dynaamisia tietoja puretaan ja muokataan JavaScriptin avulla, jotta animaatiosi vastaavat oikeaa arvoa.

Tämä artikkeli opastaa sinua JavaScriptin avulla poistamaan numeerista dataa, laskemaan prosenttiosuuksia ja käyttämään niitä avainkehyksiin viiva-dashoffset-ominaisuuden avulla. Loppujen lopuksi sinulla on selkeä käsitys siitä, kuinka JavaScript ja CSS voivat työskennellä yhdessä responsiivisten animaatioiden luomiseksi.

SVG-piirien animointi JavaScriptillä: vaiheittainen opas

Tässä esimerkissä loimme dynaamisen animaation SVG-piirille käyttämällä JavaScriptin ja CSS:n yhdistelmää. Päätavoitteena on animoida ympyrän etenemistä tilausmäärän visuaalisesti esittämiseksi reaaliajassa. Ympyrä käyttää veto-viivaero CSS-ominaisuus, joka määrittää, kuinka suuri osa ympyrän vedosta on näkyvissä. JavaScriptiä käytetään noutamaan ja laskemaan edistymisen prosenttiosuus ja sitten soveltamaan tätä arvoa viivaan, mikä mahdollistaa sujuvan animaation reaaliaikaisten tietojen perusteella.

Yksi keskeinen komponentti on hakea toiminto, joka hakee tiedot tiedostosta tai palvelimesta, tässä tapauksessa tilausmäärän. Skripti poimii datan numeerisen osan käyttämällä merkkijonojen käsittelymenetelmiä, kuten jakaa(), ja muuntaa tuloksen käyttökelpoiseksi luvuksi kanssa parseInt(). Jakamalla nykyinen tilausmäärä tavoitteella, laskemme edistymisen desimaaleina (prosenttina). Tätä prosenttiosuutta sovelletaan sitten veto-viivaero visuaalisen efektin luomiseksi.

Toinen komentosarja käsittelee tarran kiertoa, mikä lisää näyttöön dynaamisen sisällön kerroksen. Tarrat lisätään DOM:iin käyttämällä kloonisolmu() menetelmä, joka kopioi olemassa olevan tarramallin. Jokaista tarraa käännetään tietyllä aikavälillä, jota ohjataan setTimeout() toiminto. Tämä menetelmä laukaisee kierron tietyn viiveen jälkeen, mikä luo sujuvan siirtymisen tarrojen välillä ilman, että käyttäjä tarvitsee toimia.

Yhdistelmä veto-viivaero ympyrälle ja tarran kiertoskriptille luo kiinnostavan käyttöliittymän. Muutamalla dynaamisesti sekä ympyrän etenemistä että näytettäviä tarroja annamme käyttäjille visuaalisen osoituksen edistymisestä reaaliajassa. Koodin modulaarisuus varmistaa myös, että nämä ominaisuudet voidaan helposti mukauttaa muihin dataohjattuihin sovelluksiin, mikä tekee siitä joustavan ratkaisun kehittäjille, jotka haluavat toteuttaa dynaamisia käyttöliittymäelementtejä.

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

Animaatioiden parantaminen JavaScript- ja CSS-muuttujilla

Yksi tärkeä näkökohta käytössä JavaScript animaatioiden ohjaaminen on sen kykyä olla vuorovaikutuksessa CSS-muuttujat. Näiden muuttujien avulla kehittäjät voivat luoda uudelleenkäytettävää ja helposti ylläpidettävää koodia. Esimerkiksi sen sijaan, että koodaat animaatioarvoja, kuten stroke-dashoffset suoraan JavaScriptiin, voit määrittää ne CSS-muuttujiksi ja käsitellä niitä JavaScriptin avulla. Tämä tarjoaa puhtaamman tavan hallita animaatioominaisuuksia ja tekee koodistasi modulaarisemman ja skaalautuvamman.

Toinen tehokas ominaisuus JavaScriptin yhdistämisessä CSS:n kanssa on tapahtumakuuntelijoiden käyttö. Tapahtumapohjaiset animaatiot voivat käynnistyä käyttäjien vuorovaikutusten perusteella, kuten painikkeen napsauttaminen tai sivun vierittäminen alaspäin. Esimerkissämme voit parantaa animaatiota lisäämällä interaktiivisuutta. Esimerkiksi viiva-viivapoikkeama voidaan laskea uudelleen ja soveltaa dynaamisesti aina, kun käyttäjä tilaa tai suorittaa toisen toiminnon. Tämä luo erittäin mukaansatempaavan ja interaktiivisen kokemuksen, joka reagoi reaaliaikaiseen dataan.

Lisäksi yhdistäminen requestAnimationFrame avainkehysten kanssa on toinen tapa luoda sulavia ja tehokkaita animaatioita. Tämä menetelmä varmistaa, että animaatiot suoritetaan selaimen optimaalisen uudelleenmaalausjakson aikana, mikä tarjoaa paremman suorituskyvyn verrattuna perinteiseen setInterval- tai setTimeout-ohjelmaan. Tämä tekniikka on erityisen hyödyllinen, kun käsitellään usein toistuvia animaatioita tai raskaita JavaScript-prosesseja, jotka voivat muuten hidastaa käyttöliittymää.