Анимирање кључних кадрова на основу динамичких вредности помоћу ЈаваСцрипт-а

Како израчунати и анимирати вредности кључних кадрова користећи ЈаваСцрипт

Када правите динамичке веб апликације, комбиновање ЈаваСцрипт-а са ЦСС анимацијама може да створи глатке, визуелно привлачне прелазе. Један од уобичајених изазова је анимирање елемената на основу вредности података у реалном времену. Одличан пример је креирање анимација кључних кадрова које одражавају тренутни проценат траке напретка користећи СВГ и строке-дасхоффсет.

Ова техника може бити посебно корисна када приказујете динамичке вредности као што је број претплатника, као у овом примеру где се број претплата ажурира у реалном времену. Да би анимација функционисала беспрекорно, можемо да конвертујемо овај број у проценат и применимо га директно на ЦСС анимацију.

Међутим, ЈаваСцрипт може бити збуњујући када се ради са ЦСС анимацијама, посебно када се израчунавају вредности као што су проценти за ефикасно манипулисање кључним кадровима. У овом случају, разумевање како да извучете и манипулишете динамичким подацима помоћу ЈаваСцрипт-а је кључно да бисте осигурали да ваше анимације одражавају тачну вредност.

Овај чланак ће вас водити кроз коришћење ЈаваСцрипт-а за уклањање нумеричких података, израчунавање процената и њихово примену на кључне кадрове помоћу својства строке-дасхоффсет. На крају ћете имати јасно разумевање како ЈаваСцрипт и ЦСС могу да раде заједно да би креирали анимације које реагују.

Анимирање СВГ кругова помоћу ЈаваСцрипт-а: Водич корак по корак

У овом примеру смо направили динамичку анимацију за СВГ круг користећи комбинацију ЈаваСцрипт-а и ЦСС-а. Главни циљ је да се анимира напредак круга како би се визуелно представио број претплата у реалном времену. Круг користи строке-дасхоффсет ЦСС својство, које контролише колики је део потеза круга видљив. ЈаваСцрипт се користи за преузимање и израчунавање процента напретка, а затим примену те вредности на потез, омогућавајући глатку анимацију засновану на подацима у реалном времену.

Једна кључна компонента је донети функција, која преузима податке из датотеке или сервера, у овом случају, број претплате. Скрипта издваја нумерички део података користећи методе манипулације стринговима као што је сплит(), и конвертује резултат у употребљив број помоћу парсеИнт(). Дељењем тренутног броја претплате са циљем, израчунавамо напредак као децимални број (проценат). Овај проценат се затим примењује на строке-дасхоффсет да створи визуелни ефекат.

Друга скрипта управља ротацијом етикета, што додаје слој динамичког садржаја на екран. Ознаке се додају у ДОМ помоћу цлонеНоде() метод, који дуплира постојећи шаблон етикете. Свака ознака се ротира у одређеном интервалу, који контролише сетТимеоут() функција. Овај метод покреће ротацију након одређеног кашњења, стварајући гладак прелаз између ознака без потребе за интеракцијом корисника.

Комбинација од строке-дасхоффсет за круг и скрипта ротације етикете ствара занимљив кориснички интерфејс. Динамичким мењањем напредовања круга и ознака које се приказују, корисницима дајемо визуелну индикацију напретка у реалном времену. Модуларност кода такође осигурава да се ове карактеристике могу лако прилагодити другим апликацијама које се воде подацима, што га чини флексибилним решењем за програмере који желе да имплементирају динамичке елементе корисничког интерфејса.

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

Побољшање анимација помоћу ЈаваСцрипт и ЦСС променљивих

Један важан аспект употребе ЈаваСцрипт да контролише анимације је његова способност интеракције са ЦСС променљиве. Ове варијабле омогућавају програмерима да креирају вишекратни код који се лако одржава. На пример, уместо чврстог кодирања вредности анимације као што је строке-дасхоффсет директно у ЈаваСцрипт, можете их дефинисати као ЦСС променљиве и манипулисати њима користећи ЈаваСцрипт. Ово пружа јаснији начин управљања својствима анимације и чини ваш код модуларнијим и скалабилнијим.

Још једна моћна карактеристика при комбиновању ЈаваСцрипт-а са ЦСС-ом је употреба слушалаца догађаја. Анимације вођене догађајима могу да се покрену на основу интеракција корисника, као што је клик на дугме или померање странице надоле. У нашем примеру, можете побољшати анимацију додавањем интерактивности. На пример, строке-дасхоффсет се може поново израчунати и применити динамички кад год се корисник претплати или изврши другу радњу. Ово ствара веома привлачно и интерактивно искуство које реагује на податке у реалном времену.

Поред тога, комбиновање рекуестАниматионФраме са кључним кадровима је још један начин да се креирају глатке и ефикасне анимације. Овај метод обезбеђује да се анимације изводе током оптималног циклуса пресликавања претраживача, пружајући боље перформансе у поређењу са традиционалним сетИнтервал или сетТимеоут. Ова техника је посебно корисна када се ради о честим анимацијама или тешким ЈаваСцрипт процесима који би иначе могли успорити кориснички интерфејс.