Animation d'images clés basées sur des valeurs dynamiques avec JavaScript

Comment calculer et animer des valeurs d'images clés à l'aide de JavaScript

Lors de la création d'applications Web dynamiques, la combinaison de JavaScript avec des animations CSS peut créer des transitions fluides et visuellement attrayantes. Un défi courant consiste à animer des éléments basés sur des valeurs de données en temps réel. Un bon exemple est la création d'animations d'images clés qui reflètent le pourcentage actuel d'une barre de progression à l'aide de SVG et de Stroke-DashOffset.

Cette technique peut être particulièrement utile lorsque vous affichez des valeurs dynamiques comme un nombre d'abonnés, comme dans cet exemple où le nombre d'abonnements est mis à jour en temps réel. Pour que l'animation fonctionne de manière transparente, nous pouvons convertir ce nombre en pourcentage et l'appliquer directement à l'animation CSS.

Cependant, JavaScript peut prêter à confusion lorsqu'il s'agit d'animations CSS, en particulier lors du calcul de valeurs telles que des pourcentages pour manipuler efficacement les images clés. Dans ce cas, comprendre comment extraire et manipuler des données dynamiques avec JavaScript est crucial pour garantir que vos animations reflètent la valeur correcte.

Cet article vous guidera dans l'utilisation de JavaScript pour supprimer les données numériques, calculer des pourcentages et les appliquer aux images clés à l'aide de la propriété Stroke-dashoffset. À la fin, vous comprendrez clairement comment JavaScript et CSS peuvent fonctionner ensemble pour créer des animations réactives.

Animation de cercles SVG avec JavaScript : un guide étape par étape

Dans cet exemple, nous avons créé une animation dynamique pour un cercle SVG en utilisant une combinaison de JavaScript et CSS. L'objectif principal est d'animer la progression d'un cercle pour représenter visuellement un décompte d'abonnements en temps réel. Le cercle utilise le décalage de trait Propriété CSS, qui contrôle la proportion de contour du cercle visible. JavaScript est utilisé pour récupérer et calculer le pourcentage de progression, puis appliquer cette valeur au trait, permettant une animation fluide basée sur des données en temps réel.

Un élément clé est le aller chercher fonction, qui récupère les données d'un fichier ou d'un serveur, dans ce cas, le nombre d'abonnements. Le script extrait la partie numérique des données en utilisant des méthodes de manipulation de chaînes comme diviser(), et convertit le résultat en un nombre utilisable avec parseInt(). En divisant le nombre d'abonnements actuel par l'objectif, nous calculons la progression sous forme décimale (pourcentage). Ce pourcentage est ensuite appliqué au décalage de trait pour créer l'effet visuel.

Le deuxième script gère la rotation des étiquettes, ce qui ajoute une couche de contenu dynamique à l'affichage. Les étiquettes sont ajoutées au DOM à l'aide du cloneNode() méthode, qui duplique un modèle d’étiquette existant. Chaque étiquette pivote à un intervalle défini, qui est contrôlé par le setTimeout() fonction. Cette méthode déclenche la rotation après un délai spécifié, créant une transition fluide entre les étiquettes sans nécessiter d'interaction de l'utilisateur.

La combinaison de décalage de trait pour le cercle et le script de rotation des étiquettes crée une interface utilisateur attrayante. En modifiant dynamiquement à la fois la progression du cercle et les étiquettes affichées, nous donnons aux utilisateurs une indication visuelle de la progression en temps réel. La modularité du code garantit également que ces fonctionnalités peuvent être facilement adaptées à d'autres applications basées sur les données, ce qui en fait une solution flexible pour les développeurs cherchant à implémenter des éléments d'interface utilisateur dynamiques.

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

Amélioration des animations avec des variables JavaScript et CSS

Un aspect important de l’utilisation Javascript contrôler les animations est sa capacité à interagir avec Variables CSS. Ces variables permettent aux développeurs de créer un code plus réutilisable et plus facile à maintenir. Par exemple, au lieu de coder en dur des valeurs d'animation telles que Stroke-Dashoffset directement dans JavaScript, vous pouvez les définir en tant que variables CSS et les manipuler à l'aide de JavaScript. Cela offre un moyen plus propre de gérer vos propriétés d’animation et rend votre code plus modulaire et évolutif.

Une autre fonctionnalité puissante lors de la combinaison de JavaScript avec CSS est l'utilisation d'écouteurs d'événements. Les animations basées sur des événements peuvent se déclencher en fonction des interactions de l'utilisateur, comme cliquer sur un bouton ou faire défiler une page. Dans notre exemple, vous pouvez améliorer l'animation en ajoutant de l'interactivité. Par exemple, le offset-dashoffset peut être recalculé et appliqué dynamiquement chaque fois qu'un utilisateur s'abonne ou effectue une autre action. Cela crée une expérience très engageante et interactive qui répond aux données en temps réel.

De plus, en combinant requêteAnimationFrame avec des images clés est une autre façon de créer des animations fluides et efficaces. Cette méthode garantit que les animations sont exécutées pendant le cycle de repeinture optimal du navigateur, offrant de meilleures performances par rapport aux setInterval ou setTimeout traditionnels. Cette technique est particulièrement utile lorsqu'il s'agit d'animations fréquentes ou de processus JavaScript lourds qui pourraient autrement ralentir l'interface utilisateur.