Animació de fotogrames clau basats en valors dinàmics amb JavaScript

Com calcular i animar valors de fotogrames clau amb JavaScript

Quan es creen aplicacions web dinàmiques, la combinació de JavaScript amb animacions CSS pot crear transicions suaus i atractives visualment. Un repte comú és animar elements basats en valors de dades en temps real. Un bon exemple és la creació d'animacions de fotogrames clau que reflecteixen el percentatge actual d'una barra de progrés mitjançant SVG i stroke-dashoffset.

Aquesta tècnica pot ser especialment útil quan mostreu valors dinàmics com un recompte de subscriptors, com en aquest exemple, on el nombre de subscripcions s'actualitza en temps real. Perquè l'animació funcioni perfectament, podem convertir aquest nombre en un percentatge i aplicar-lo directament a l'animació CSS.

Tanmateix, JavaScript pot ser confús quan es tracta d'animacions CSS, especialment quan es calculen valors com percentatges per manipular fotogrames clau de manera eficaç. En aquest cas, entendre com extreure i manipular dades dinàmiques amb JavaScript és crucial per garantir que les vostres animacions reflecteixin el valor correcte.

Aquest article us guiarà a través de l'ús de JavaScript per eliminar dades numèriques, calcular percentatges i aplicar-los als fotogrames clau mitjançant la propietat stroke-dashoffset. Al final, tindreu una comprensió clara de com JavaScript i CSS poden treballar junts per crear animacions responsives.

Animació de cercles SVG amb JavaScript: una guia pas a pas

En aquest exemple, hem creat una animació dinàmica per a un cercle SVG mitjançant una combinació de JavaScript i CSS. L'objectiu principal és animar el progrés d'un cercle per representar visualment un recompte de subscripcions en temps real. El cercle utilitza el traç-dashoffset Propietat CSS, que controla quant del traç del cercle és visible. JavaScript s'utilitza per obtenir i calcular el percentatge de progrés i després aplicar aquest valor al traç, permetent una animació suau basada en dades en temps real.

Un component clau és el buscar funció, que recupera dades d'un fitxer o servidor, en aquest cas, el recompte de subscripcions. L'script extreu la part numèrica de les dades mitjançant mètodes de manipulació de cadenes com ara dividir (), i converteix el resultat en un nombre utilitzable amb parseInt(). En dividir el recompte de subscripcions actual per l'objectiu, calculem el progrés com a decimal (percentatge). Aquest percentatge s'aplica després al traç-dashoffset per crear l'efecte visual.

El segon script gestiona la rotació d'etiquetes, que afegeix una capa de contingut dinàmic a la pantalla. Les etiquetes s'afegeixen al DOM mitjançant l' cloneNode() mètode, que duplica una plantilla d'etiqueta existent. Cada etiqueta es gira a un interval determinat, que està controlat per setTimeout() funció. Aquest mètode activa la rotació després d'un retard especificat, creant una transició suau entre les etiquetes sense requerir la interacció de l'usuari.

La combinació de traç-dashoffset per al cercle i l'script de rotació d'etiquetes crea una interfície d'usuari atractiva. En canviar dinàmicament tant el progrés del cercle com les etiquetes que es mostren, oferim als usuaris una indicació visual del progrés en temps real. La modularitat del codi també garanteix que aquestes funcions es puguin adaptar fàcilment a altres aplicacions basades en dades, cosa que la converteix en una solució flexible per als desenvolupadors que busquen implementar elements dinàmics d'IU.

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

Millora de les animacions amb variables JavaScript i CSS

Un aspecte important de l'ús JavaScript per controlar les animacions és la seva capacitat d'interaccionar Variables CSS. Aquestes variables permeten als desenvolupadors crear codis més reutilitzables i fàcils de mantenir. Per exemple, en lloc de codificar els valors d'animació com stroke-dashoffset directament a JavaScript, podeu definir-los com a variables CSS i manipular-los mitjançant JavaScript. Això proporciona una manera més neta de gestionar les propietats de l'animació i fa que el codi sigui més modular i escalable.

Una altra característica potent quan es combina JavaScript amb CSS és l'ús d'escoltes d'esdeveniments. Les animacions basades en esdeveniments es poden activar en funció de les interaccions de l'usuari, com ara fer clic a un botó o desplaçar-se cap avall per una pàgina. Al nostre exemple, podeu millorar l'animació afegint interactivitat. Per exemple, el stroke-dashoffset es pot recalcular i aplicar de manera dinàmica sempre que un usuari es subscrigui o realitzi una altra acció. Això crea una experiència molt atractiva i interactiva que respon a les dades en temps real.

A més, combinant requestAnimationFrame amb fotogrames clau és una altra manera de crear animacions suaus i eficients. Aquest mètode garanteix que les animacions es realitzen durant el cicle de repintat òptim del navegador, proporcionant un millor rendiment en comparació amb setInterval o setTimeout tradicionals. Aquesta tècnica és especialment útil quan es tracta d'animacions freqüents o de processos de JavaScript pesats que, d'altra manera, poden alentir la interfície d'usuari.