Kā izveidot animētu SVG spidometru

A mērītājs ir rīks, kas vizuāli norāda vērtību noteiktā diapazonā. Datoros: a “diska vietas indikators” izmanto mērinstrumentu, lai parādītu, cik daudz diska vietas tiek izmantots no kopējā pieejamā. Mērinstrumentu diapazonā ir zonas vai reģioni, katrs no tiem atšķiras pēc savas krāsas. Attīstības sākumposmā mēs varam izmantot HTML5 tag, lai parādītu datus noteiktā diapazonā.

Šajā ziņojumā mēs izveidosim SVG gabarīta metrs ar pusapļa formu, un animēt to. Apskatiet šo priekšskatījumu GIF, kas parāda kā galīgā versija darbosies Firefox:

Mērītāja diapazons ir 0-100, un tas tiek parādīts trīs vienādas zonas dzeltenā, zilā un sarkanā krāsā. Jūs varat mainīt zonu diapazonu un skaitu atbilstoši savām vajadzībām.

Paskaidrojuma nolūkos es veikšu manuālus aprēķinus un izmantojiet inline SVG atribūtus / rekvizītus šādos soļos.

Tomēr mana pēdējā demonstrācija izmanto CSS un JavaScript SVG rekvizītu aprēķināšanai un ievietošanai, lai padarītu to elastīgāku.

1. Zīmējiet apli

Izdarīsim vienkāršu apli SVG. HTML5 ir jauns tag ļauj mums pievienot SVG tieši HTML kodā. Iekšpusē tag, mēs pievienojam SVG forma ir šāda:

CSS, pievienosim platums un augstums īpašības iesaiņojumam, kas ir lielāks vai vienāds ar apļa diametru (mūsu piemērā tas ir 300px). Mums ir arī jānosaka platums un augstums #meters elements līdz 100%.

 #wrapper platums: 400px; augstums: 400px;  #meters platums: 100%; augstums: 100%;

2. Pievienojiet lokam kontūru un noņemiet aizpildi

Ar insults un gājiena platums SVG rekvizītus pievienojam lokam kontūru un, izmantojot fill = "none" īpašums mēs arī noņemam apļa aizpildi.

3. aptveriet tikai pusi no apļa

The insults-dasharray SVG īpašums rada nojaukto kontūru un ņem divas vērtības, svītra garums un plaisa garums.

Attiecībā uz pusapļa kontūru svītra garums Vērtībai jābūt vienādai ar apļa daļējo apkārtmēru, lai domuzīme aptver pusi apļa apkārtmēru, un plaisa garums vērtība ir vienāda vai lielāka par atlikušo apkārtmēru.

Kad tas ir vairāk, pārlūkprogrammā tas tiks pārvērsts par atlikušo apkārtmēru, tāpēc mēs izmantosim visu plaisa garums. Tādā veidā mēs varam izvairīties no atlikušā apkārtnes aprēķināšanas.

Apskatīsim aprēķinus:

$apkārtmērs = 2 Ã? Â? Ã¢Â? π \times r$

kur r ir rādiuss. 150 rādiusā apkārtmērs ir:

$\begin{matrix} apkārtmērs = 2 Ã? Â? Ã¢Â? π \times 150 \\ apkārtmērs = 942,48 \end{matrix}$

Ja mēs to sadalām ar 2, mēs saņemam 471.24 daļēji perimetram, tāpēc insults-dasharray 150 apļa rādiusā ir pusloka kontūras īpašums 471, 943. Šis pusaplis tiks izmantots, lai apzīmētu skaitītāja zema diapazona zonu.

Kā jūs varat redzēt, tas ir otrādi, tāpēc ieslēdziet SVG, pievienojot pārveidot CSS īpašums ar vērtību rotateX (180deg) uz HTML elements.

 #meter transformēt: rotateX (180deg);

4. Pievienojiet citas zonas

The vidējā zona (zilā krāsā) ir jāaptver circle pusloka daļa, un ⅔ no 471 ir 314. Tātad, pievienosim vēl vienu loku mūsu SVG, izmantojot insults-dasharray atkal, bet tagad ar vērtību 314, 943.

  < /circle>

The galīgā zona (sarkanajam) jāaptver pēdējais circle pusloka daļa, un ⅓ no 471 ir 157, tāpēc mēs pievienosim šo vērtību insults-dasharray trešā apļa īpašums.

5. Pievienojiet skaitītāja kontūru

Pievienosim skaitītāju pelēku kontūru, lai tas izskatītos labāk. The svītra garums kontūras lokam jābūt vienādam ar daļēji apkārtmēru. Mēs to ievietojam kodā pirms visiem pārējiem lokiem, lai tā būtu vispirms sniedz pārlūks, un tāpēc būs parādās zem reģiona lokiem ekrānā.

The gājiena platums īpašumam ir jābūt nedaudz lielākam par citu aprindu īpatsvaru, lai parādītu īstu kontūru.

     < /circle>

Kontūru beigas

Tā kā kontūra neaptver pusloka galus, mēs pievienojam arī 2 rindas aptuveni 2px uz galiem, pievienojot vēl vienu loku ar svītra garums 2px un a plaisa garums daļēji apkārtmērs mīnus 2px. Tāpēc. \ T insults-dasharray šī apļa īpašums ir 2, 469.

Maska

Tagad pievienosim vēl vienu loku pēc zema, vidēja un augsta diapazona zonām. Jaunais aplis darbosies kā maska, lai paslēptu nevajadzīgos zonu reģionus, kad tiks izmantots mērierīce.

Tās īpašības būs tādas pašas kā kontūras lokam, un tā gājiena krāsa arī būs pelēka. Maska vēlāk tiks mainīta ar Javascript, lai atklātu zonas zem tās, atbildot uz ievades slīdni.

Līdz šim kombinētais kods ir šāds.

Ja mēs vēlamies atklāt reģionu zem maskas, mums ir jāsamazina maskas izmērs svītra garums. Piemēram, ja vērtība insults-dasharray maska apļa īpašums ir 157, 943, loki būs šādā stāvoklī:

Tātad, tagad mums ir jākoriģē insults-dasharray maska, izmantojot JavaScript animācijai. Bet pirms mēs to darām, kā jau iepriekš minēju, pēdējam demonstrējumam izmantoju CSS un JavaScript, lai aprēķinātu un pievienotu lielāko daļu SVG rekvizītu.

Zemāk jūs atradīsiet HTML, CSS un JavaScript kodu, kas noved pie tā paša rezultāta kā iepriekš.

HTML

Es pievienoju adatas attēlu (gauge-needle.svg), diapazona slīdni (ieejas # slīdni) uz lietotāja ievadi un etiķeti (etiķete # lbl), lai parādītu slīdņa vērtību diapazonā no 0 līdz 100.

CSS

Zemāk redzamais CSS kods pievieno SVG stila noteikumus, jo SVG formas var veidot tāpat kā HTML elementus. Ja vēlaties uzzināt vairāk par to, kā veidot SVG ar CSS, apskatiet šo ziņu. Slīdņa veidošanai skatiet šo ziņu.

 #wrapper position: relatīvais; starpība: auto;  #meters platums: 100%; augstums: 100%; transformēt: rotateX (180deg);  .circle fill: none;  .line, #mask insults: # F1F1F1; gājiena platums: 65;  .izveidot insults-width: 60;  #slider, #lbl amats: absolūts;  #slider kursors: rādītājs; pa kreisi: 0; starpība: auto; pa labi: 0; augšā: 58%; platums: 94%;  #lbl fona krāsa: # 4B4C51; robežu rādiuss: 2px; krāsa: balta; font-family: jaunais kurjers; fonta lielums: 15pt; font-weight: bold; polsterējums: 4px 4px 2px 4px; pa labi: -48px; augšā: 57%;  #meter_needle augstums: 40%; pa kreisi: 0; starpība: auto; pozīcija: absolūta; pa labi: 0; tops: 10%; transformācijas izcelsme: apakšējais centrs; / * orientācija fix * / transformācija: pagriezt (270deg);

JavaScript

JavaScript, vispirms mēs aprēķinām un iestatām aploksnes un visu loku izmērus, tad pievienojam atbilstošu insults-dasharray vērtības aprindās. Pēc tam mēs saistīsim pielāgotu notikumu diapazona slīdni, lai veiktu animāciju.

 / * Iestatīt rādiusu visiem lokiem * / var r = 250; var circles = document.querySelectorAll ('. aplis'); var total_circles = circles.length; par (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);

Pielāgots `range_change_event ()` Funkcija

Mēraparāta uzvedību veic range_change_event () pielāgota funkcija, kas atbild par maskas izmēra un adatas animācijas pielāgošanu.

Tas aizņem slīdņa vērtību (lietotāja ievadi), kas ir no 0 līdz 100, pārvērš to par daļēji perimetru (meter_value), kuru vērtība ir starp 471-0 (471 ir 150 apļa rādiuss), un to nosaka meter_value kā svītra garums maska insults-dasharray īpašums.

The range_change_event () pielāgotā funkcija arī pagriež adatu pēc tam, kad lietotāja ievadi (kas atrodas 0-100 diapazonā) pārveido līdz 0-180 grādu ekvivalentam.

Minētajā kodā adatas rotācijai pievieno 270 °, jo manis izmantotais attēls ir vertikāli adatas, un man sākotnēji bija jāgriežas 270 °, lai tas būtu plakans uz kreiso pusi.

Visbeidzot, es saistīju range_change_event () funkcijas diapazona slīdni, lai mēraparātu varētu darbināt ar to.

Pārbaudiet demo vai apskatiet avota kodu mūsu vietnē Github krātuve.