Kako narediti animirani merilnik hitrosti SVG

A merilnik tlaka je orodje, ki vizualno označuje vrednost znotraj danega območja. V računalnikih, a “indikator prostora na disku” uporablja merilnik za merjenje, da prikaže, koliko prostora na disku se porabi od razpoložljivega. Merilniki imajo območja ali regije v celotnem obsegu, od katerih se vsak razlikuje po svoji barvi. V front-end razvoju lahko uporabimo Oznaka HTML5 za prikaz podatkov v določenem območju.

V tej objavi bomo naredili Merilnik SVG polkrožne oblike, in ga animirajte. Oglejte si ta predogled GIF, ki se prikazuje kako bo delovala končna različica v Firefoxu:

Merilnik razpon je 0-100, in se prikaže treh enakih območjih v rumeni, modri in rdeči barvi. Obseg in število con lahko spremenite glede na vaše potrebe.

Za namene razlage bom izvedel ročne izračune in uporabil atribute / lastnosti SVG v naslednjih korakih.

Moj končni demo pa uporablja CSS in JavaScript za izračun in vstavljanje lastnosti SVG, da bi bil bolj prilagodljiv.

1. Narišite krog

Nariši preprost krog v SVG. HTML5 je nov tag nam omogoča, da dodamo SVG v kodo HTML. V notranjosti tag, dodamo Oblika SVG, kot je ta:

V CSS dodamo premer in višine lastnosti ovojnice, večje od ali enako premeru kroga (v našem primeru je 300px). Nastaviti moramo tudi širino in višino #meter element do 100%.

 #wrapper širina: 400px; višina: 400px;  #meter širina: 100%; višina: 100%;

2. Dodajte oris krogu in odstranite polnilo

S pomočjo. \ T kap in širina hoda Lastnosti SVG krogu dodamo oris in z uporabo fill = "none" premoženja odstranimo tudi krog.

3. pokrijte samo polovico kroga

The kap-dasharray Lastnost SVG ustvari črtan obris in vzame dve vrednosti, dolžina pomišljaja in dolžina reže.

Za obris polkrog, dolžina pomišljaja vrednost mora biti enaka polkrožnici kroga, tako da pomišljaj pokriva polovico obsega kroga in dolžina reže vrednost mora biti enaka ali večja od preostalega obsega.

Ko bo več, bo brskalnik pretvoril v preostali obseg, zato bomo uporabili polno vrednost oboda za dolžina reže. Na ta način se lahko izognemo izračunu preostalega obsega.

Poglejmo izračune:

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

kje r je polmer. Za polmer 150 je obseg:

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

Če jo razdelimo na 2, dobimo 471.24 za pol-obod, torej vrednost kap-dasharray lastnost za polkrožni obris v krogu s polmerom 150 471, 943. Ta polkrog bo uporabljen za označevanje cone nizkega območja merilnika.

Kot lahko vidite, je obrnjena na glavo, zato obrnemo SVG navzgor z dodajanjem transform Lastnost CSS z vrednostjo rotateX (180deg) do Element HTML.

 #meter transform: rotateX (180deg);

4. Dodajte druga območja

The srednji pas (modra) mora pokriti of del polkroga in 47 od 471 je 314. Torej, dodajmo še en krog v naš SVG z uporabo kap-dasharray spet, vendar zdaj z vrednostjo 314, 943.

  < /circle>

The končno cono (rdeča) mora pokrivati zadnji del polkroga in ⅓ od 471 je 157, zato bomo dodali to vrednost kap-dasharray lastnost tretjega kroga.

5. Dodajte Oris merilnika

V merilnik dodamo sivi obris, da bo bolje videti. The dolžina pomišljaja obrisnega kroga mora biti enaka polkrožnici. Postavimo ga pred vse druge kroge v kodi, tako da bo najprej prikaže brskalnik, in zato bo prikazani pod krogi regij na zaslonu.

The širina hoda lastnost mora biti nekoliko večja od lastnine drugih krogov, da bi dobila videz resničnega orisa.

     < /circle>

Konica se konča

Ker obris ne pokriva koncev polkroga, dodamo še 2 vrstici približno 2 px, tako da dodamo še en krog z dolžina pomišljaja 2px in a dolžina reže od pol-oboda minus 2px. Zato vrednost kap-dasharray lastnost tega kroga je 2, 469.

Maska

Sedaj dodamo še en krog za nizkimi, povprečnimi in visokimi območji. Novi krog bo deloval kot maska za skrivanje nepotrebnih območnih območij, ko bo merilnik merilnika deloval.

Njegove lastnosti bodo enake lastnostim kroga orisa, njegova barva udarca pa bo tudi siva. Maska bo kasneje spremenjena z Javascriptom, da se prikažejo območja pod njo kot odziv na vhodni drsnik.

Doslej združena koda je spodaj.

Če želimo razkriti regijo pod masko, moramo zmanjšati velikost maske dolžina pomišljaja. Na primer, ko je vrednost kap-dasharray lastnost kroga maske je 157, 943, loki bodo stali v naslednjem stanju:

Torej, vse kar moramo storiti je, da prilagodimo kap-dasharray maske z uporabo JavaScripta za animacijo. Toda preden to storimo, kot sem že omenil, sem za svoj zadnji demo uporabil CSS in JavaScript za izračun in dodajanje večine lastnosti SVG.

Spodaj lahko najdete kodo HTML, CSS in JavaScript, ki vodi do istega rezultata kot zgoraj.

HTML

Dodal sem sliko z iglo (gauge-needle.svg), drsnik za obseg (# drsnik #) do uporabniškega vnosa in oznake (oznaka # lbl) za prikaz vrednosti drsnika v območju 0-100.

CSS

Spodnja koda CSS dodaja pravila za sloge v SVG, saj lahko oblike SVG oblikujemo na enak način kot elemente HTML. Če želite prebrati več o tem, kako oblikovati SVG s CSS, si oglejte to objavo. Za oblikovanje drsnika preverite to objavo.

 #wrapper position: relative; margin: auto;  #meter širina: 100%; višina: 100%; transformacija: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; širina giba: 65;  .razlika širina udarca: 60;  #slider, #lbl position: absolute;  #slider kazalec: kazalec; levo: 0; margin: auto; desno: 0; na vrh: 58%; širina: 94%;  #lbl barva ozadja: # 4B4C51; obrobni polmer: 2px; barva: bela; družina pisav: 'courier new'; velikost pisave: 15pt; font-weight: krepko; oblazinjenje: 4px 4px 2px 4px; desno: -48px; na vrh: 57%;  #meter_needle višina: 40%; levo: 0; margin: auto; položaj: absolutno; desno: 0; vrh: 10%; izvor transformacije: spodnji center; / * orientacija fix * / transform: vrtenje (270deg);

JavaScript

V JavaScriptu najprej izračunamo in nastavimo dimenzije ovojnice in vseh lokov, nato dodamo ustrezno kap-dasharray vrednosti v krogih. Po tem bomo za izvedbo animacije povezali dogodek po meri z drsnikom za obseg.

 / * Nastavite polmer za vse kroge * / var r = 250; var circles = document.querySelectorAll (". krog"); var total_circles = krožnice.dolžina; za (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);

Po meri `range_change_event ()` Funkcija

Obnašanje merilnika se izvede z range_change_event () funkcija po meri, ki je odgovorna za prilagoditev velikosti maske in animacije igle.

Potrebno je vrednost drsnika (uporabniški vnos), ki je med 0-100, pretvori ga v ekvivalent polkroga (meter_value) vrednosti med 471-0 (471 je pol-obod za polmer 150) in to nastavi meter_value kot dolžina pomišljaja maske kap-dasharray nepremičnine.

The range_change_event () Funkcija po meri tudi obrne iglo po pretvorbi uporabniškega vnosa (ki prihaja v območju od 0 do 100) do njegove stopnje ekvivalenta 0-180.

270 ° se pri vrtenju igle doda v zgornjo kodo, ker je slika, ki sem jo uporabil, pokončna igla in jo moram najprej zasukati za 270 °, da bi jo položila na levo.

Končno sem se zavezala range_change_event () funkcijo drsnika dometa, tako da se lahko z njim upravlja merilnik.

Oglejte si demo ali pa si oglejte izvorno kodo pri nas Skladišče Github.