Kako napraviti animirani SVG brzinomjer

mjerača je alat koji vizualno označava vrijednost unutar zadanog raspona. U računalima, a “indikator prostora na disku” koristi mjerač mjerača kako bi pokazao koliko prostora na disku se koristi od ukupno dostupnog diska. Mjerila imaju zone ili regije u svom rasponu, od kojih se svaka razlikuje po svojoj boji. U front-end razvoju, možemo koristiti HTML5 oznaka za prikaz podataka unutar određenog raspona.

U ovom postu napravit ćemo SVG mjerač polukružnog oblika, i animirajte ga. Pogledajte ovaj GIF pregled koji prikazuje kako će finalna verzija funkcionirati u Firefoxu:

Mjerač raspon je 0-100, i prikazuje tri jednake zone u žutoj, plavoj i crvenoj. Možete promijeniti raspon i broj zona prema vašim potrebama.

U svrhu objašnjenja izvršit ću ručne izračune i koristiti inline SVG atribute / svojstva u sljedećim koracima.

Moj završni demo, međutim, koristi CSS i JavaScript za izračun i umetanje SVG svojstava kako bi bio fleksibilniji.

1. Nacrtajte krug

Napravimo jednostavan krug u SVG-u. HTML5 je novi oznaka omogućuje nam dodavanje SVG-a izravno u HTML kod. Unutar , dodamo SVG oblik ovako:

U CSS-u dodamo širina i visina svojstva omotača, oba veća ili jednaka promjeru kruga (u našem primjeru je 300 px). Također moramo postaviti širinu i visinu #metar element do 100%.

 #wrapper width: 400px; visina: 400px;  #meter širina: 100%; visina: 100%; 

2. Dodajte obris u krug i uklonite ispunu

Uz pomoć udar i udar širine SVG svojstvima dodajemo obris u krug i pomoću ispuniti = "none" vlasništvo također uklanjamo krug.

3. pokriti samo polovicu kruga

takta DashArray Svojstvo SVG stvara isprekidani obris i uzima dvije vrijednosti, duljina crtice i duljina razmaka.

Za polukružni obris, duljina crtice vrijednost treba biti jednaka polukrugu kruga, tako da crtica pokriva polovicu opsega kruga i duljina razmaka vrijednost treba biti jednaka ili veća od preostalog opsega.

Kada je više, preglednik će konvertirati u preostali opseg, stoga ćemo upotrijebiti punu vrijednost opsega za duljina razmaka. Na taj način možemo izbjeći izračunavanje preostalog opsega.

Pogledajmo izračune:

$\mathrm{opseg}=2Ă\; ??\; Â\; ??\; ¢Â\; ??\; Â\; ??\pi \times r$

gdje r je polumjer. Za radijus od 150, opseg je:

$\begin{array}{}\mathrm{opseg}=2Ă\; ??\; Â\; ??\; ¢Â\; ??\; Â\; ??\pi \times \mathrm{150}\\ \mathrm{opseg}=\mathrm{942,48}\end{array}$

Ako ga podijelimo s 2, dobivamo 471.24 za polu-opseg, tako da vrijednost takta DashArray svojstvo za polukružni obris u krugu radijusa 150 471, 943. Ovaj polukrug će se koristiti za označavanje zone niskog dometa brojila.

Kao što možete vidjeti, okrenut je naopako, pa okrenimo SVG dodavanjem transformirati CSS svojstvo s vrijednošću rotateX (180deg) prema HTML element.

 #meter transform: rotateX (180deg); 

4. Dodajte druge zone

srednja zona (plava) mora pokriti of dio polukruga, a 47 od 471 je 314. Dakle, dodajmo još jedan krug našem SVG-u koristeći takta DashArray opet, ali sada s vrijednošću 314, 943.

  < /circle>  

konačna zona (crveno) mora pokriti posljednji ⅓ dio polukruga, a 47 od 471 je 157, pa ćemo dodati ovu vrijednost takta DashArray svojstvo trećeg kruga.

5. Dodajte skicu mjerača

Dodajte sivi obris na mjerač kako bi izgledao bolje. duljina crtice kruga obrisa treba biti jednak polu-opsegu. Stavljamo ga ispred svih ostalih krugova u kodu, tako da će biti najprije u pregledniku, i stoga će biti prikazani ispod krugova regije na ekranu.

udar širine vlasništvo treba biti malo veće od onoga u drugim krugovima, kako bi se dobio izgled pravog obrisa.

     < /circle>      

Okvir završava

Budući da kontura ne pokriva krajeve polukruga, dodamo još dva reda od oko 2 piksela na kraj dodavanjem drugog kruga s duljina crtice od 2px i a duljina razmaka polukružja minus 2px. Stoga vrijednost takta DashArray vlasništvo ovog kruga je 2, 469.

Maska

Dodajmo još jedan krug iza zona niskog, prosječnog i visokog raspona. Novi krug funkcionirat će kao maska ​​za skrivanje nepotrebnih zonskih regija kada će se mjerilo izmjeriti.

Njegova svojstva bit će ista kao i ona u kružnom obrisu, a boja udarca će također biti siva. Maska će kasnije biti promijenjena s Javascriptom kako bi otkrila zone ispod nje kao odgovor na ulazni klizač.

Kombinirani kod do sada je kao u nastavku.

Ako želimo otkriti regiju ispod maske, moramo smanjiti veličinu maske duljina crtice. Na primjer, kada vrijednost takta DashArray svojstvo kruga maske je 157, 943, lukovi će stajati u sljedećem stanju:

Dakle, sve što sada trebamo je prilagoditi takta DashArray maske pomoću JavaScripta za animaciju. Ali prije nego što to učinimo, kao što sam već spomenuo, za svoj završni demo koristio sam CSS i JavaScript za izračunavanje i dodavanje većine SVG svojstava.

U nastavku možete pronaći HTML, CSS i JavaScript kod koji vodi do istog rezultata kao gore.

HTML

Dodao sam sliku iglom (Mjerač-needle.svg), klizač raspona (ulaz # klizač) na korisnički unos i oznaku (Oznaka # LBL) za prikaz vrijednosti klizača u rasponu od 0-100.

    0 
 

CSS

Donji CSS kod dodaje pravila stila SVG-u, jer se SVG oblici mogu stilizirati na isti način kao i HTML elementi. Ako želite pročitati više o tome kako oblikovati SVG pomoću CSS-a, pogledajte ovaj post. Za oblikovanje klizača pogledajte ovaj post.

 #wrapper position: relative; margina: auto;  #meter širina: 100%; visina: 100%; transformacija: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; širina hoda: 65; . raspon širina udara: 60;  #slider, #lbl position: absolute;  #slider pokazivač: pokazivač; lijevo: 0; margina: auto; desno: 0; vrh: 58%; širina: 94%;  #lbl pozadinska boja: # 4B4C51; granični radijus: 2px; boja: bijela; familija fontova: 'courier new'; veličina fonta: 15pt; font-weight: bold; obloga: 4px 4px 2px 4px; desno: -48px; vrh: 57%;  #meter_needle visina: 40%; lijevo: 0; margina: auto; položaj: apsolutni; desno: 0; vrh: 10%; podrijetlo transformacije: donji centar; / * orijentacija fix * / transform: rotiranje (270deg); 

JavaScript

U JavaScriptu najprije izračunamo i postavimo dimenzije omota i sve lukove, a zatim dodamo odgovarajuću takta DashArray vrijednosti u krugovima. Nakon toga, mi ćemo obvezati prilagođeni događaj na klizač raspona kako bismo izvršili animaciju.

 / * Postavite radijus za sve krugove * / var r = 250; var circles = document.querySelectorAll (". krug"); var total_circles = kružnice.duljina; 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); 

Custom range_change_event () Funkcija

Ponašanje brojila vrši se od strane range_change_event () prilagođena funkcija koja je odgovorna za podešavanje veličine maske i animacije igle.

Potrebna je vrijednost klizača (korisnički unos) koja je između 0-100, pretvara ga u ekvivalent polu-opsega (meter_value) vrijednosti između 471-0 (471 je polu-opseg za polumjer 150) i to postavlja meter_value kao duljina crtice maske takta DashArray svojstvo.

range_change_event () prilagođena funkcija također okreće iglu nakon pretvaranja korisničkog unosa (koji dolazi u rasponu od 0 do 100) do stupnja ekvivalentnog 0-180.

270 ° se dodaje u rotaciju igle u gornjem kodu, jer je slika koju sam koristio bila uspravna igla i morala sam je rotirati 270 ° kako bi ležala ravno na lijevoj strani.

Naposljetku, vezao sam range_change_event () funkciju na klizač raspona, tako da se njime može upravljati mjerač mjerača.

Provjerite demo ili pogledajte izvorni kod kod nas Githubov repozitorij.