Comment faire un compteur de vitesse SVG animé

UNE mètre de jauge est un outil qui indique visuellement une valeur dans une plage donnée. Dans les ordinateurs, un “indicateur d'espace disque” utilise un compteur de jauge pour indiquer la quantité d'espace disque utilisée par rapport au total disponible. Les jauges ont des zones ou des régions sur toute leur étendue, chacune différenciée par sa propre couleur. Dans le développement frontal, nous pouvons utiliser le Balise HTML5 pour afficher des données dans une plage spécifique.

Dans ce post, nous ferons un Jauge de niveau SVG de forme semi-circulaire, et l'animer. Jetez un oeil à cet aperçu GIF qui montre comment fonctionnera la version finale dans Firefox:

Le compteur la plage est 0-100, et il affiche trois zones égales en jaune, bleu et rouge. Vous pouvez modifier la plage et le nombre de zones en fonction de vos besoins.

À des fins d’explication, je vais effectuer des calculs manuels et utiliser les attributs / propriétés SVG en ligne dans les étapes suivantes..

Ma dernière démo, cependant, utilise CSS et JavaScript pour le calcul et l’insertion de propriétés SVG afin de le rendre plus flexible..

1. Trace un cercle

Tirons un simple cercle en SVG. Le nouveau HTML5 Cette balise nous permet d’ajouter SVG directement dans le code HTML. À l'intérieur de tag, nous ajoutons le Forme SVG comme ceci:

En CSS, ajoutons largeur et la taille propriétés de l'emballage, les deux étant supérieur ou égal au diamètre du cercle (300px dans notre exemple). Nous devons également définir la largeur et la hauteur du #mètre élément à 100%.

 #wrapper width: 400px; hauteur: 400px;  #meter width: 100%; hauteur: 100%;

2. Ajouter un contour au cercle et supprimer le remplissage

Avec l'aide du accident vasculaire cérébral et largeur du trait Propriétés SVG nous ajoutons un contour au cercle, et en utilisant le remplir = "aucun" propriété, nous supprimons le remplissage du cercle ainsi.

3. ne couvrent que la moitié du cercle

le accident vasculaire cérébral La propriété SVG crée un contour en pointillé et prend deux valeurs, longueur du tiret et longueur de fente.

Pour le contour en demi-cercle, le longueur du tiret la valeur doit être égale à la demi-circonférence du cercle, de sorte que le tiret couvre la moitié de la circonférence du cercle, et le longueur de fente la valeur doit être égale ou supérieure à la circonférence restante.

Quand c'est plus, il sera converti à la circonférence restante par le navigateur, nous utiliserons donc la valeur de la circonférence complète pour la longueur de fente. De cette façon, nous pouvons éviter de calculer la circonférence restante.

Voyons les calculs:

$circonférence = 2 Ã ?? Â ?? Ã¢Â ?? Â ?? π \times r$

où r est le rayon. Pour un rayon de 150, la circonférence est:

$\begin{matrix} circonférence = 2 Ã ?? Â ?? Ã¢Â ?? Â ?? π \times 150 \\ circonférence = 942.48 \end{matrix}$

Si on le divise par 2, on obtient 471.24 pour la demi-circonférence, donc la valeur de accident vasculaire cérébral propriété pour un contour en demi-cercle dans un cercle de 150 rayons est 471, 943. Ce demi-cercle sera utilisé pour désigner la zone de basse portée du compteur.

Comme vous pouvez le voir, c’est la tête en bas, alors retournons le SVG en ajoutant le transformer Propriété CSS avec la valeur de RotationX (180deg) au Élément HTML.

 #meter transform: rotateX (180deg);

4. Ajouter les autres zones

le zone médiane (bleu) doit couvrir la partie du demi-cercle, et de 471 est 314. Ajoutons donc un autre cercle à notre SVG en utilisant le accident vasculaire cérébral propriété à nouveau, mais maintenant avec la valeur de 314, 943.

  < /circle>

le zone finale (rouge) doit couvrir la dernière last partie du demi-cercle, et de 471 est 157, nous allons donc ajouter cette valeur à la accident vasculaire cérébral propriété du troisième cercle.

5. Ajouter le contour du compteur

Ajoutons un contour gris au lecteur pour l’améliorer. le longueur du tiret du cercle de contour doit être égal à la demi-circonférence. Nous le plaçons avant tous les autres cercles du code, de sorte qu'il soit rendu en premier par le navigateur, et sera donc affiché sous les cercles de région sur l'écran.

le largeur du trait la propriété doit être un peu plus grande que celle des autres cercles pour donner l’apparence d’un contour réel.

     < /circle>

Contours fins

Comme le contour ne couvre pas les extrémités du demi-cercle, nous ajoutons également 2 lignes d'environ 2px aux extrémités en ajoutant un autre cercle avec un longueur du tiret de 2px et un longueur de fente de la demi-circonférence moins 2px. Par conséquent, la valeur de la accident vasculaire cérébral la propriété de ce cercle est 2 469.

Masque

Ajoutons maintenant un autre cercle après les zones basse, moyenne et haute. Le nouveau cercle fonctionnera comme un masque pour masquer les zones inutiles lorsque le compteur à jauge est utilisé.

Ses propriétés seront les mêmes que celles du cercle de contour et sa couleur de trait sera également grise. Le masque sera ensuite redimensionné avec Javascript pour révéler les zones situées en dessous, en réponse à un curseur de saisie..

Le code combiné jusqu'à présent est comme ci-dessous.

Si nous voulons révéler une région sous le masque, nous devons réduire la taille du masque longueur du tiret. Par exemple, lorsque la valeur du accident vasculaire cérébral propriété du cercle de masque est 157, 943, les arcs seront dans l'état suivant:

Donc, tout ce que nous avons à faire maintenant, c’est d’ajuster la accident vasculaire cérébral du masque en utilisant JavaScript pour l'animation. Mais avant cela, comme je l'ai déjà mentionné, pour ma dernière démo, j'ai utilisé CSS et JavaScript pour calculer et ajouter la plupart des propriétés SVG..

Ci-dessous, vous trouverez le code HTML, CSS et JavaScript qui conduit au même résultat que ci-dessus..

HTML

J'ai ajouté une image de l'aiguille (gauge-needle.svg), un curseur de plage (entrée # curseur) à l'entrée utilisateur et une étiquette (label # lbl) pour afficher la valeur du curseur dans la plage 0-100.

CSS

Le code CSS ci-dessous ajoute des règles de style au SVG, les formes SVG pouvant être stylées de la même manière que les éléments HTML. Si vous souhaitez en savoir plus sur la manière de styler SVG avec CSS, consultez ce post. Pour styler le curseur, consultez ce post.

 #wrapper position: relative; marge: auto;  #meter width: 100%; hauteur: 100%; transformer: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; largeur de trait: 65;  .range largeur de trait: 60;  #slider, #lbl position: absolute;  #slider curseur: pointeur; gauche: 0; marge: auto; à droite: 0; en haut: 58%; largeur: 94%;  #lbl background-color: # 4B4C51; border-radius: 2px; Couleur blanche; font-family: 'messager new'; taille de la police: 15 points; poids de police: gras; remplissage: 4px 4px 2px 4px; à droite: -48px; en haut: 57%;  #meter_needle height: 40%; gauche: 0; marge: auto; position: absolue; à droite: 0; Top 10%; origine de la transformation: centre bas; / * correction de l'orientation * / transform: rotation (270deg);

JavaScript

Dans le code JavaScript, nous calculons et définissons d'abord les dimensions du wrapper et de tous les arcs, puis nous ajoutons le code approprié. accident vasculaire cérébral valeurs aux cercles. Après cela, nous lierons un événement personnalisé au curseur de plage afin d'exécuter l'animation..

 / * Définir le rayon pour tous les cercles * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; pour (var i = 0; i < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event);

La douane `range_change_event ()` Une fonction

Le comportement du compteur est effectué par le range_change_event () fonction personnalisée responsable du réglage de la taille du masque et de l'animation de l'aiguille.

Il prend la valeur du curseur (entrée utilisateur) qui est comprise entre 0 et 100, le convertit en équivalent semi-circonférence (mètre_valeur) d'une valeur comprise entre 471-0 (471 est la demi-circonférence du rayon 150) et définit mètre_valeur comme le longueur du tiret du masque accident vasculaire cérébral propriété.

le range_change_event () La fonction personnalisée fait également pivoter l'aiguille après la conversion de l'entrée utilisateur (comprise entre 0 et 100) en son équivalent en degré de 0 à 180..

270 ° est ajouté à la rotation de l'aiguille dans le code ci-dessus parce que l'image que j'ai utilisée est une aiguille verticale et que je devais d'abord la faire pivoter à 270 ° pour la faire reposer à plat à gauche..

Enfin, j'ai lié le range_change_event () fonction sur le curseur de plage, de sorte que le compteur peut être utilisé avec lui.

Vérifiez démo ou jetez un oeil sur le code source de notre Référentiel Github.