Animácia kľúčových snímok na základe dynamických hodnôt pomocou JavaScriptu

Ako vypočítať a animovať hodnoty kľúčových snímok pomocou JavaScriptu

Pri vytváraní dynamických webových aplikácií môže kombinácia JavaScriptu s animáciami CSS vytvárať hladké, vizuálne príťažlivé prechody. Jednou z bežných výziev je animácia prvkov na základe hodnôt údajov v reálnom čase. Skvelým príkladom je vytváranie animácií kľúčových snímok, ktoré odrážajú aktuálne percento ukazovateľa priebehu pomocou SVG a posunu pomlčiek.

Táto technika môže byť obzvlášť užitočná, keď zobrazujete dynamické hodnoty, ako je počet odberateľov, ako v tomto príklade, kde sa počet odberov aktualizuje v reálnom čase. Aby animácia fungovala bez problémov, môžeme toto číslo previesť na percentá a použiť ho priamo na animáciu CSS.

JavaScript však môže byť mätúci pri práci s animáciami CSS, najmä pri výpočte hodnôt, ako sú percentá, aby ste mohli efektívne manipulovať s kľúčovými snímkami. V tomto prípade je dôležité pochopiť, ako extrahovať a manipulovať s dynamickými údajmi pomocou JavaScriptu, aby sa zabezpečilo, že vaše animácie budú odrážať správnu hodnotu.

Tento článok vás prevedie používaním JavaScriptu na odstránenie číselných údajov, výpočet percent a ich aplikovanie na kľúčové snímky pomocou vlastnosti stroke-dashoffset. Na konci budete mať jasnú predstavu o tom, ako môžu JavaScript a CSS spolupracovať pri vytváraní responzívnych animácií.

Animácia kruhov SVG pomocou JavaScriptu: Sprievodca krok za krokom

V tomto príklade sme vytvorili dynamickú animáciu pre kruh SVG pomocou kombinácie JavaScriptu a CSS. Hlavným cieľom je animovať priebeh kruhu tak, aby vizuálne reprezentoval počet odberov v reálnom čase. Kruh používa ťah-pomlčka Vlastnosť CSS, ktorá riadi, aká veľká časť ťahu kruhu je viditeľná. JavaScript sa používa na načítanie a výpočet percenta pokroku a následné použitie tejto hodnoty na ťah, čo umožňuje hladkú animáciu založenú na údajoch v reálnom čase.

Jednou z kľúčových zložiek je aport funkcia, ktorá získava údaje zo súboru alebo servera, v tomto prípade počet odberov. Skript extrahuje číselnú časť údajov pomocou metód manipulácie s reťazcami, ako je napr rozdeliť ()a skonvertuje výsledok na použiteľné číslo s parseInt(). Vydelením aktuálneho počtu odberov cieľom vypočítame priebeh ako desatinné číslo (v percentách). Toto percento sa potom použije na ťah-pomlčka na vytvorenie vizuálneho efektu.

Druhý skript sa stará o rotáciu menovky, ktorá na displej pridáva vrstvu dynamického obsahu. Štítky sa do DOM pridávajú pomocou cloneNode() metóda, ktorá duplikuje existujúcu šablónu štítku. Každý štítok sa otáča v nastavenom intervale, ktorý riadi setTimeout() funkciu. Táto metóda spustí rotáciu po určenom oneskorení, čím sa vytvorí hladký prechod medzi menovkami bez potreby interakcie používateľa.

Kombinácia ťah-pomlčka pre kruh a skript rotácie štítkov vytvára pútavé používateľské rozhranie. Dynamickou zmenou priebehu kruhu a zobrazovaných štítkov poskytujeme používateľom vizuálnu indikáciu pokroku v reálnom čase. Modularita kódu tiež zaisťuje, že tieto funkcie možno ľahko prispôsobiť iným aplikáciám založeným na údajoch, čo z neho robí flexibilné riešenie pre vývojárov, ktorí chcú implementovať dynamické prvky používateľského rozhrania.

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

Vylepšenie animácií pomocou JavaScriptu a premenných CSS

Jeden dôležitý aspekt používania JavaScript na ovládanie animácií je schopnosť interakcie s CSS premenné. Tieto premenné umožňujú vývojárom vytvárať viac opakovane použiteľný a ľahko udržiavateľný kód. Napríklad namiesto pevného kódovania hodnôt animácií, ako je zdvih-dashoffset priamo do JavaScriptu, ich môžete definovať ako premenné CSS a manipulovať s nimi pomocou JavaScriptu. To poskytuje čistejší spôsob správy vlastností animácie a váš kód je modulárnejší a škálovateľnejší.

Ďalšou silnou funkciou pri kombinovaní JavaScriptu s CSS je použitie poslucháčov udalostí. Animácie riadené udalosťami sa môžu spúšťať na základe interakcií používateľa, ako je kliknutie na tlačidlo alebo posúvanie stránky nadol. V našom príklade môžete animáciu vylepšiť pridaním interaktivity. Napríklad posunutie ťahu a pomlčky možno prepočítať a použiť dynamicky vždy, keď sa používateľ prihlási na odber alebo vykoná inú akciu. To vytvára vysoko pútavý a interaktívny zážitok, ktorý reaguje na dáta v reálnom čase.

Navyše kombinovanie requestAnimationFrame s kľúčovými snímkami je ďalší spôsob, ako vytvoriť plynulé a efektívne animácie. Táto metóda zaisťuje, že sa animácie vykonávajú počas optimálneho cyklu prekresľovania prehliadača, čím poskytuje lepší výkon v porovnaní s tradičnými nastaveniami setInterval alebo setTimeout. Táto technika je užitočná najmä pri častých animáciách alebo náročných procesoch JavaScriptu, ktoré môžu inak spomaľovať používateľské rozhranie.