Kuidas teha animeeritud SVG kiirusmõõturit

A mõõtur on tööriist, mis visuaalselt näitab väärtust antud vahemikus. Arvutites a “kettaruumi indikaator” kasutab näidiku mõõturit, et näidata, kui palju on kettaruumi saadaval olevast kogusest. Mõõturitel on oma vahemikus tsoonid või piirkonnad, millest igaüks erineb oma värvi järgi. Esikülje arendamisel saame kasutada HTML5 silt, et kuvada andmeid teatud vahemikus.

Selles postituses teeme SVG gabariitmõõtja poolringikujuline, ja animeerida. Vaadake seda GIF-eelvaadet, mis näitab kuidas lõplik versioon töötab Firefoxis:

Mõõdik vahemik on 0-100, ja see kuvatakse kolm võrdset tsooni kollane, sinine ja punane. Tsoonide vahemikku ja arvu saate muuta vastavalt teie vajadustele.

Selgituste tegemiseks teostan käsitsi arvutused ja kasutan inline SVG atribuute / omadusi järgmistes etappides.

Minu viimane demo kasutab siiski CSS-i ja JavaScript-i SVG omaduste arvutamiseks ja sisestamiseks, et muuta see paindlikumaks.

1. Joonista ring

Joonistame SVG-s lihtsa ringi. HTML5 on uus silt võimaldab meil lisada SVG-d otse HTML-koodi. Sisse silt, lisame SVG kuju on selline:

Lisage CSS-is laius ja kõrgus ümbrise omadused, mis on suuremad või võrdsed ringi läbimõõduga (meie näites on see 300 pikslit). Samuti peame määrama laiuse ja kõrguse #meter element 100%.

 #wrapper laius: 400px; kõrgus: 400 px;  #meter laius: 100%; kõrgus: 100%; 

2. Lisage ringile kontuur ja eemaldage täitmine

. \ T insult ja löögilaius SVG atribuudid lisame ringile kontuuri ja kasutades fill = "none" me eemaldame ka ringi täitmise.

3. katke ainult pool ringist

The insult-dasharray SVG omadus loob katkendliku kontuuri ja võtab kaks väärtust, kriipsupikkus ja vahe pikkus.

Poolringikujunduse jaoks on kriipsupikkus väärtus peab olema võrdne ringi poolringiga, nii et kriips katab poole ringi ümbermõõdust ja vahe pikkus väärtus peab olema võrdne või suurem kui ülejäänud ümbermõõt.

Kui see on rohkem, teisendatakse see brauseri poolt ülejäänud ümbermõõduks, seega kasutame selle jaoks kogu ümbermõõdu väärtust vahe pikkus. Nii saame vältida ülejäänud ümbermõõdu arvutamist.

Vaatame arvutused:

$\mathrm{ümbermõõt}=2Ã?\; Â?\; âÂ?\pi \times r$

kus r on raadius. Raadiusega 150 on ümbermõõt:

$\begin{array}{}\mathrm{ümbermõõt}=2Ã?\; Â?\; âÂ?\pi \times \mathrm{150}\\ \mathrm{ümbermõõt}=\mathrm{942,48}\end{array}$

Kui me selle jagame 2-ga, siis saame poolringi jaoks 471,24, nii et selle väärtus insult-dasharray 150 ringi ringi poolringikujulise objekti omadus on 471, 943. Seda poolringi kasutatakse mõõturi madala vahemiku tsooni tähistamiseks.

Nagu näete, on see tagurpidi, nii et lülitage SVG üles, lisades teisendada CSS-i vara väärtusega rotateX (180deg) Euroopa HTML-element.

 #meter transform: rotateX (180deg); 

4. Lisage teised tsoonid

The keskmine tsoon (sinine) peab katma poolringi ⅔ osa ja 1 471 on 314. Seega lisame oma SVG-le veel ühe ringi, kasutades insult-dasharray vara uuesti, kuid nüüd väärtusega 314, 943.

  < /circle>  

The lõplik tsoon (punane) peab katma poolringi viimase ⅓ osa ja 1 471 on 157, nii et me lisame selle väärtuse insult-dasharray kolmanda ringi vara.

5. Lisage mõõteseade

Lisame mõõturile halli kontuuri, et muuta see paremaks. The kriipsupikkus kontuuri ring peab olema võrdne poolringikujuga. Me paneme selle kõigi teiste ringkondade ette koodis, nii et see oleks esmalt brauser, ja seega saab olema kuvatakse piirkonna ringide all ekraanil.

The löögilaius kinnisvara peab olema veidi suurem kui teiste ringkondade puhul, et anda tõeline ülevaade.

     < /circle>      

Outline Ends

Kuna kontuur ei kata poolringi otsasid, lisame ka kaks rida umbes 2 pikslit lõpuni, lisades teise ringi kriipsupikkus 2px ja a vahe pikkus poolringikujuline miinus 2px. Seetõttu on selle väärtus insult-dasharray Selle ringi omadus on 2, 469.

Mask

Nüüd lisame veel ühe ringi pärast madala, keskmise ja kõrge vahemiku tsoone. Uus suhtlusring toimib maskina, et varjata mittevajalikke tsoonipiirkondi, kui mõõdikumõõtur töötab.

Selle omadused on samad, mis kontuuripiirkonnas, ja selle löögivärv on ka hall. Maski muudetakse hiljem Javascripti abil, et näha selle all olevad tsoonid vastuseks sisendliugurile.

Kombineeritud kood on siiani allpool.

Kui me tahame maski all olevat piirkonda paljastada, peame vähendama maski suurust kriipsupikkus. Näiteks, kui väärtus insult-dasharray maskipiirkonna omadus on 157, 943, kaared jäävad järgmisesse olekusse:

Niisiis, kõik, mida me nüüd tegema peame, on kohandada insult-dasharray mask, kasutades JavaScripti animatsiooniks. Kuid enne seda, kui ma seda varem mainisin, kasutasin oma lõpliku demo jaoks CSS-i ja JavaScript-i, et arvutada ja lisada enamik SVG omadusi.

Allpool leiate HTML-, CSS- ja JavaScripti koodi, mis toob kaasa sama tulemuse nagu eespool.

HTML

Lisasin nõela pildi (gauge-needle.svg), vahemiku liugurit (sisendi # liugurit) kasutaja sisendile ja sildile (etikett # lbl), et kuvada liuguri väärtus vahemikus 0-100.

    0 
 

CSS

Allolev CSS-kood lisab SVG-le stiilieeskirjad, kuna SVG-kujundeid saab kujundada samamoodi nagu HTML-elemente. Kui soovite lugeda rohkem SVG stiilist CSS-iga, siis vaadake seda postitust. Liuguri kujundamiseks vaadake seda postitust.

 #wrapper asukoht: suhteline; marginaal: auto;  #meter laius: 100%; kõrgus: 100%; transformeerimine: rotateX (180deg);  .circle fill: none;  .joon, #mask insult: # F1F1F1; käigupikkus: 65;  .korralda insult-width: 60;  #slider, #lbl asukoht: absoluutne;  #slider kursor: kursor; vasakul: 0; marginaal: auto; paremale: 0; top: 58%; laius: 94%;  #lbl taustavärv: # 4B4C51; raadius: 2px; värv: valge; font-family: „kuller uus”; fondi suurus: 15pt; fondi kaal: rasvane; polsterdus: 4px 4px 2px 4px; paremale: -48px; ülemine osa: 57%;  #meter_needle kõrgus: 40%; vasakul: 0; marginaal: auto; positsioon: absoluutne; paremale: 0; top: 10%; transform-päritolu: alumine keskus; / * orientatsioon fix * / transform: pöörake (270deg); 

JavaScript

JavaScriptis arvutame kõigepealt pakendi ja kõigi kaarte mõõtmed ja määrame need, seejärel lisame sobiva insult-dasharray väärtused suhtlusringidesse. Pärast seda oleme sidumise jaoks kohandatud sündmuse vahemiku liuguriga, et animatsiooni teha.

 / * Kõigi ringide raadius * / var r = 250; var circles = document.querySelectorAll ('. ring'); var total_circles = circles.length; jaoks (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); 

Kohandatud range_change_event () Funktsioon

Arvesti käitumist teostab range_change_event () kohandatud funktsioon, mis vastutab maski suuruse ja nõela animatsiooni reguleerimise eest.

See võtab liuguri väärtuse (kasutaja sisend), mis on vahemikus 0-100, teisendab selle poolringi ekvivalendiks (meter_value), mille väärtus on vahemikus 471-0 (471 on poolring ümbermõõt raadiuses 150) ja määrab selle meter_value nagu kriipsupikkus maski omadest insult-dasharray vara.

The range_change_event () kohandatud funktsioon pöörab nõela ka pärast seda, kui kasutaja sisend (0-100 vahemikus) on konverteeritud 0-180 kraadi ekvivalendiks.

Eespool nimetatud koodis lisatakse nõela pöörlemisele 270 °, sest kasutatav pilt on püstise nõelaga ja ma pean algselt seda 270 ° pöörlema, et see oleks vasakule lameda.

Lõpuks ma sidusin range_change_event () funktsioneerima vahemiku liuguriga, nii et selle mõõturit saab kasutada koos sellega.

Kontrollige demo või vaata meie lähtekoodi Githubi hoidla.