Kaip sukurti animuotą SVG spidometrą

A matuoklis yra įrankis, kuris vizualiai nurodo vertę tam tikru intervalu. Kompiuteriuose, a “disko vietos indikatorius” naudoja matuoklio matuoklį, kad parodytų, kiek vietos diske yra naudojama iš viso turimo. Gabaritai turi zoną arba regionus, esančius jos diapazone, kiekvienas skiriasi pagal savo spalvą. Vykdant „front-end“, galime naudoti HTML5 žyma, kad būtų rodomi duomenys tam tikrame diapazone.

Šiame pranešime mes padarysime SVG matuoklis pusiau apskrito formos, ir animuoti. Pažvelkite į šį „GIF“ peržiūrą kaip galutinė versija veiks „Firefox“:

Matavimo prietaisas diapazonas yra 0-100, ir jis rodomas trys lygios zonos geltonos, mėlynos ir raudonos spalvos. Galite keisti zonų diapazoną ir skaičių pagal savo poreikius.

Aiškinamiesiems tikslams atliksiu rankinius skaičiavimus ir naudosiu inline SVG atributus / savybes šiuose veiksmuose.

Tačiau galutinis demonstravimas naudoja CSS ir JavaScript SVG savybių skaičiavimui ir įterpimui, kad jis taptų lankstesnis.

1. Nupieškite ratą

Nupieškime paprastą ratą SVG. Naujas HTML5 žyma leidžia pridėti SVG į HTML kodą. Viduje žyma, pridedame SVG forma tokia:

CSS, pridėkime plotis ir aukštis pakuotės savybės, didesnės arba lygios apskritimo skersmeniui (mūsų pavyzdyje tai 300 pikselių). Taip pat turime nustatyti plotį ir aukštį #meteris elementas iki 100%.

 #wrapper plotis: 400px; aukštis: 400px;  #meteris plotis: 100%; aukštis: 100%; 

2. Pridėti apskritimo kontūrą ir pašalinkite užpildą

Su. \ T insultas ir smūgio plotis SVG ypatybės pridedame kontūrą prie rato ir naudojant fill = "none" taip pat pašaliname rato užpildą.

3. padengti tik pusę apskritimo

The insultas-dasharray SVG ypatybė sukuria brūkšniuotą kontūrą ir du vertes, brūkšnys ir spragų ilgis.

Dėl pusinio apskritimo kontūro brūkšnys vertė turi būti lygi apskritimo pusrutuliui, kad brūkšnys padengtų pusę apskritimo apskritimo ir spragų ilgis vertė turi būti lygi arba didesnė už likusią perimetrą.

Kai tai daugiau, naršyklė ją konvertuos į likusį perimetrą, taigi mes naudosime visą spragų ilgis. Tokiu būdu mes negalime apskaičiuoti likusio perimetro.

Pamatysime skaičiavimus:

$\mathrm{perimetras}=2�\; �\; â�\pi \times r$

kur r yra spindulys. 150 metrų spinduliu perimetras yra:

$\begin{array}{}\mathrm{perimetras}=2�\; �\; â�\pi \times \mathrm{150}\\ \mathrm{perimetras}=\mathrm{942,48}\end{array}$

Jei mes jį padalijame 2, mes gauname 471,24 pusiau perimetrams, todėl insultas-dasharray 150 ratų apskritimo puslankio kontūro nuosavybė 471, 943. Šis puslankis bus naudojamas matuoklio žemo diapazono zonai žymėti.

Kaip matote, tai aukštyn kojom, todėl įjunkite SVG, pridėdami transformuoti CSS turtas, kurio vertė yra rotateX (180deg) į HTML elementas.

 #meter transform: rotateX (180deg); 

4. Pridėkite kitas zonas

The vidurinė zona (mėlyna) turi padengti circle pusiau apskritimo dalį ir 1 iš 471 yra 314. Taigi, pridėkime kitą ratą prie mūsų SVG naudojant insultas-dasharray dar kartą, bet dabar - su 314, 943.

  < /circle>  

The galutinė zona (raudona) turi apimti paskutinę circle pusiau apskritimo dalį ir ⅓ iš 471 yra 157, todėl šią vertę pridėsime prie insultas-dasharray trečiojo rato nuosavybė.

5. Pridėti matuoklio kontūrą

Pridėkime matuoklį pilką kontūrą, kad jis atrodytų geriau. The brūkšnys kontūro rato turi būti lygus pusrutuliui. Mes įdėjome jį prieš visus kitus apskritimus kode, kad jis būtų pirmiausia pateikia naršyklė, ir todėl bus rodomi po regiono apskritimais ekrane.

The smūgio plotis Turtas turi būti šiek tiek didesnis nei kitų apskritimų, kad būtų galima išreikšti tikrą kontūrą.

     < /circle>      

Kontūro pabaiga

Kadangi kontūras neapima puslo apskritimo galų, mes taip pat pridedame 2 eilutes apie 2px į galus, pridedant kitą ratą su brūkšnys 2px ir a spragų ilgis pusiau perimetro minus 2px. Todėl. \ T insultas-dasharray šio rato nuosavybė 2, 469.

Kaukė

Dabar pridėkime kitą apskritimą po žemo, vidutinio ir didelio diapazono zonų. Naujasis apskritimas veiks kaip kaukė, skirta paslėpti nereikalingus zonų regionus, kai bus naudojamas matuoklis.

Jo savybės bus tokios pačios kaip kontūro rato savybės, o jo smūgio spalva taip pat bus pilka. Vėliau kaukė bus pakeista su „Javascript“, kad būtų atskleistos zonos po juo, atsakant į įvesties slankiklį.

Bendrasis kodas iki šiol yra toks, kaip nurodyta toliau.

Jei norime atskleisti regioną po kaukė, turime sumažinti kaukės dydį brūkšnys. Pavyzdžiui, kai insultas-dasharray kaukės rato nuosavybė 157, 943, lankai bus tokioje būsenoje:

Taigi, viskas, ką turime padaryti dabar, yra pakoreguoti insultas-dasharray kaukę naudojant „JavaScript“ animacijai. Tačiau prieš tai darydami, kaip minėjau anksčiau, paskutiniam demonstravimui naudoju CSS ir „JavaScript“, kad galėčiau apskaičiuoti ir pridėti daugumą SVG savybių.

Žemiau rasite HTML, CSS ir „JavaScript“ kodus, kurie sukelia tą patį rezultatą kaip ir anksčiau.

HTML

Pridėjau adatos vaizdą (gauge-needle.svg), diapazono slankiklį (įvesties # slankiklį) į vartotojo įvestį ir etiketę (etiketė # lbl) rodyti slankiklio vertę nuo 0 iki 100.

    0 
 

CSS

Toliau pateikiamas CSS kodas į SVG prideda stiliaus taisykles, nes SVG formos gali būti formuojamos taip pat, kaip ir HTML elementai. Jei norite daugiau sužinoti apie tai, kaip sukurti SVG su CSS, pažiūrėkite į šį įrašą. Jei norite formuoti slankiklį, patikrinkite šį įrašą.

 #wrapper pozicija: santykinis; marža: auto;  #meteris plotis: 100%; aukštis: 100%; transformuoti: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; smūgio plotis: 65;  .gali stroke-width: 60;  #slider, #lbl pozicija: absoliutus;  #slider žymeklis: žymeklis; kairėje: 0; marža: auto; dešinėje: 0; viršuje: 58%; plotis: 94%;  #lbl fono spalva: # 4B4C51; pasienio spindulys: 2px; spalva: balta; font-family: „courier new“; šrifto dydis: 15pt; šrifto svoris: paryškintas; pagalvėlė: 4px 4px 2px 4px; dešinėje: -48px; viršuje: 57%;  #meter_needle aukštis: 40%; kairėje: 0; marža: auto; pozicija: absoliutus; dešinėje: 0; 10 geriausių%; transformacijos kilmė: apatinis centras; / * orientacija fiksuoti * / transformuoti: pasukti (270deg); 

„JavaScript“

„JavaScript“ pirmiausia apskaičiuojame ir nustatome įvynio ir visų lankų matmenis, tada pridedame tinkamą insultas-dasharray vertybių ratams. Po to mes prisiimsime pasirinktinį įvykį į diapazono slankiklį, kad galėtume atlikti animaciją.

 / * Visų apskritimų spindulys * / var r = 250; var circles = document.querySelectorAll („. ratas“); var total_circles = circles.length; už (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

Matuoklio elgesį atlieka range_change_event () individuali funkcija, atsakinga už kaukės dydžio ir adatos animacijos koregavimą.

Tai užima slankiklio vertę (vartotojo įvestį), kuri yra tarp 0-100, konvertuoja į pusiau perimetro ekvivalentą (meter_value), kurių vertė yra tarp 471-0 (471 - pusiau perimetras, kai spindulys yra 150), ir nustato meter_value kaip brūkšnys kaukės insultas-dasharray nuosavybė.

The range_change_event () pasirinktinė funkcija taip pat sukasi adatą po to, kai vartotojo įvestis (0-100 diapazone) konvertuojama į 0-180 laipsnio ekvivalentą.

Prie adatos sukimosi pirmiau minėtame kode pridedama 270 °, nes naudojamas vaizdas yra vertikali adata ir pradžioje turėjau pasukti 270 ° kampą, kad jis būtų lygus į kairę.

Galiausiai, aš susaistiau range_change_event () funkciją į diapazono slankiklį, kad matuoklis su juo būtų valdomas.

Patikrinkite demo arba pažiūrėkite į mūsų šaltinį „Github“ saugykla.