Hur man gör en animerad SVG-hastighetsmätare

en mätmätare är ett verktyg som visuellt anger ett värde inom ett visst område. I datorer, a “diskutrymmeindikator” använder en mätmätare för att visa hur mycket diskutrymme används från den totala tillgängliga. Mätare har zoner eller regioner över sitt sortiment, var och en differentierad med sin egen färg. I front-end-utvecklingen kan vi använda HTML5-tagg för att visa data inom ett visst område.

I det här inlägget gör vi en SVG-mätare i halvcirkelform, och animera det. Ta en titt på denna förhandsgranskning GIF som visar hur den slutliga versionen kommer att fungera i Firefox:

Mätaren är intervallet är 0-100, och det visas tre lika zoner i gult, blått och rött. Du kan ändra intervall och antal av zoner enligt dina behov.

För förklaringar gör jag manuella beräkningar och använder inline SVG attribut / egenskaper i följande steg.

Min sista demo använder dock CSS och JavaScript för beräkning och infogning av SVG egenskaper för att göra det mer flexibelt.

1. Rita en cirkel

Låt oss rita en enkel cirkel i SVG. HTML5: s nya taggen tillåter oss att lägga till SVG direkt in i HTML-koden. Inuti tagg, lägger vi till SVG formar så här:

I CSS, låt oss lägga till bredd och höjd egenskaper till omslaget, båda större än eller lika med cirkelns diameter (det är 300px i vårt exempel). Vi måste också ställa in bredden och höjden på #meter element till 100%.

 #wrapper width: 400px; höjd: 400px;  # meter bredd: 100%; höjd: 100%;

2. Lägg till skiss till cirkeln och ta bort fyllningen

Med hjälp av stroke och stroke-bredd SVG egenskaper vi lägger till en skiss till cirkeln, och genom att använda fylla = "none" egendom tar vi också bort cirkelens fyllning.

3. täck bara hälften av cirkeln

De stroke-dasharray SVG-egenskapen skapar en streckad kontur och tar två värden, streck längd och gaplängd.

För halvcirkelplanen, den streck längd värdet behöver vara lika med cirkelens halvomkrets, så att bindestrecket täcker halva cirkelns omkrets, och gaplängd värdesbehov måste vara lika med eller mer än den återstående omkretsen.

När det är mer kommer det att konverteras till den återstående omkretsen av webbläsaren, så vi kommer att använda hela omkretsvärdet för gaplängd. På detta sätt kan vi undvika att beräkna den återstående omkretsen.

Låt oss se beräkningarna:

$omkrets = 2 Ã ?? Â ?? Ã¢Â ?? Â ?? π \times r$

var r är radien. För en radie av 150 är omkretsen:

$\begin{matrix} omkrets = 2 Ã ?? Â ?? Ã¢Â ?? Â ?? π \times 150 \\ omkrets = 942,48 \end{matrix}$

Om vi delar upp det med 2 får vi 471.24 för halvomkretsen, så värdet av stroke-dasharray egenskap för en halvcirkelplan i en cirkel på 150 radie är 471, 943. Denna halvcirkel kommer att användas för att beteckna mätarens Lågområdeområde.

Som du kan se är det upp och ner, så låt oss svänga SVG upp genom att lägga till omvandla CSS egendom med värdet av rotateX (180 grader) till HTML-element.

 #meter transform: rotateX (180deg);

4. Lägg till de andra zonerna

De mittzon (blå) måste täcka halvdelen av halvcirkeln och ⅔ av 471 är 314. Så, lägg till en annan cirkel till vårt SVG med hjälp av stroke-dasharray egendom igen, men nu med värdet av 314, 943.

  < /circle>

De sista zonen (röd) måste täcka den sista ⅓ delen av halvcirkeln, och ⅓ av 471 är 157, så vi lägger till detta värde till stroke-dasharray egenskapen för den tredje cirkeln.

5. Lägg till mätarens översikt

Låt oss lägga till en grå skiss till mätaren för att få det att se bättre ut. De streck längd av konturcirkeln måste vara lika med halvomkretsen. Vi placerar den framför alla andra cirklar i koden, så att den blir gjordes först av webbläsaren, och därför kommer det att bli visas under regionens cirklar på skärmen.

De stroke-bredd egendom måste vara lite större än för andra kretsar, för att ge utseendet av en riktig skiss.

     < /circle>

Outline Ends

Eftersom konturen inte täcker halvcirkeländarna, lägger vi också till 2 linjer på ca 2px till ändarna genom att lägga till en annan cirkel med en streck längd av 2px och a gaplängd av halvomkretsen minus 2px. Därför värdet av stroke-dasharray egenskapen för denna cirkel är 2, 469.

Mask

Låt oss nu lägga till en annan cirkel efter de låga, genomsnittliga och höga zonerna. Den nya cirkeln fungerar som en mask för att dölja de onödiga zonregionerna när mätmätaren ska användas.

Dess egenskaper kommer att vara desamma som i cirkelkretsen, och dess slagfärg blir också grå. Masken ändras senare med Javascript för att visa zonerna under den som svar på en inmatningsreglage.

Den kombinerade koden hittills är som nedan.

Om vi vill avslöja en region under masken måste vi minska maskans storlek streck längd. Till exempel när värdet av stroke-dasharray egenskapen hos maskcirkeln är 157, 943, bågarna kommer att stå i följande tillstånd:

Så allt vi behöver göra nu är att justera stroke-dasharray av masken med hjälp av JavaScript för animering. Men innan vi gör det, som jag nämnde tidigare, för min sista demo använde jag CSS och JavaScript för att beräkna och lägga till de flesta SVG-egenskaperna.

Nedan hittar du HTML, CSS och JavaScript-koden som leder till samma resultat som ovan.

html

Jag lade till en nålbild (gauge-needle.svg), en räckvidde (input # reglaget) till användarinmatningen och en etikett (label # LBL) för att visa skjutvärdet i intervallet 0-100.

CSS

CSS-koden nedan lägger till stilregler till SVG, eftersom SVG-former kan formateras på samma sätt som HTML-element. Om du vill läsa mer om hur du utformar SVG med CSS, ta en titt på det här inlägget. För styling av reglaget, kolla in det här inlägget.

 #wrapper position: relative; marginal: auto;  # meter bredd: 100%; höjd: 100%; transformera: rotateX (180deg);  .circle fill: none;  .outline, #mask slag: # F1F1F1; slagbredd: 65;  .range slagbredd: 60;  #slider, #lbl position: absolute;  #slider markör: pekare; vänster: 0; marginal: auto; höger: 0; topp: 58%; bredd: 94%;  #lbl bakgrundsfärg: # 4B4C51; gränsstråle: 2px; färg vit; font-family: "Courier New"; typsnittstorlek: 15pt; font-weight: bold; vaddering: 4px 4px 2px 4px; höger: -48px; topp: 57%;  #meter_needle höjd: 40%; vänster: 0; marginal: auto; position: absolut; höger: 0; topp 10%; transformations-ursprung: botten centrum; / * orienteringsfix * / transform: rotera (270deg);

JavaScript

I JavaScript beräknar vi först och anger måtten på omslaget och alla bågar, så lägger vi till det lämpliga stroke-dasharray värden till cirklarna. Efter det kommer vi att binda en anpassad händelse till raden för att utföra animeringen.

 / * Ange radie för alla cirklar * / var r = 250; varcirklar = document.querySelectorAll ('circle'); var totalt_cirklar = cirklar. längd; för (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);

Kunden `range_change_event ()` Fungera

Mätarens beteende utförs av range_change_event () anpassad funktion som är ansvarig för justeringen av maskstorleken och nålens animering.

Det tar glidarvärdet (användarinmatning) som är mellan 0-100, omvandlar det till halvomkretsen motsvarande (meter_value) med ett värde mellan 471-0 (471 är halvomkretsen för radie 150) och sätter det meter_value som den streck längd av maskens stroke-dasharray fast egendom.

De range_change_event () anpassad funktion roterar också nålen efter konvertering av användarinmatningen (kommer i 0-100-intervallet) till sin grad motsvarande 0-180.

270 ° läggs till nålens rotation i ovanstående kod eftersom bilden jag använde är av en upprätt nål och jag var tvungen att rotera den 270 ° för att få den att ligga platt åt vänster.

Slutligen bundet jag range_change_event () funktionen till intervallreglaget, så att mätmätaren kan användas med den.

Kolla in demo eller ta en titt på källkoden på vår Githubförvaret.