Ako urobiť animovaný rýchlomer SVG

gauge meter je nástroj, ktorý vizuálne indikuje hodnotu v danom rozsahu. V počítačoch a “indikátor miesta na disku” používa ukazovateľ, ktorý ukáže, koľko miesta na disku je použité z celkovej dostupnej kapacity. Meradlá majú zóny alebo oblasti v celom svojom rozsahu, pričom každý z nich je odlíšený vlastnou farbou. Pri vývoji front-end môžeme použiť Značku HTML5 na zobrazenie údajov v rámci určitého rozsahu.

V tomto príspevku urobíme SVG merač polokruhovitého tvaru, a animovať ju. Pozrite si tento náhľad GIF, ktorý sa zobrazuje ako bude konečná verzia fungovať vo Firefoxe:

Merače rozsah je 0-100, a zobrazí sa tri rovnaké zóny v žltej, modrej a červenej farbe. Rozsah a počet zón môžete zmeniť podľa vašich potrieb.

Na účely vysvetlenia budem robiť manuálne výpočty a v nasledujúcich krokoch používať inline SVG atribúty / vlastnosti.

Moja posledná ukážka však používa CSS a JavaScript na výpočet a vkladanie vlastností SVG, aby bola flexibilnejšia.

1. Nakreslite kruh

V SVG vytvoríme jednoduchý kruh. HTML5 je nové tag nám umožňuje pridať SVG priamo do HTML kódu. Vnútri tag, pridáme SVG tvar takto:

V CSS pridáme šírka a výška vlastnosti obalu, ktoré sú väčšie alebo rovné priemeru kruhu (v našom príklade je to 300px). Musíme tiež nastaviť šírku a výšku #meter prvok až 100%.

 #wrapper width: 400px; výška: 400px;  #meter šírka: 100%; výška: 100%; 

2. Pridajte obrys do kruhu a odstráňte výplň

S pomocou mŕtvica a mŕtvice šírky Vlastnosti SVG pridáme obrys do kruhu a pomocou fill = "none" vlastníctvo odstránime aj vyplnenie kruhu.

3. pokryť len polovicu kruhu

zdvihu dasharray Vlastnosť SVG vytvorí prerušený obrys a má dve hodnoty, dĺžka čiarky a dĺžka medzery.

Pre polkruhový obrys sa dĺžka čiarky hodnota sa musí rovnať polomeru obvodu kružnice, takže pomlčka pokrýva polovicu obvodu kruhu a dĺžka medzery hodnota musí byť rovnaká alebo väčšia ako zostávajúci obvod.

Keď je to viac, bude prehliadačom premenené na zostávajúci obvod, a preto použijeme hodnotu plného obvodu pre prehliadač. dĺžka medzery. Týmto spôsobom sa môžeme vyhnúť výpočtu zostávajúceho obvodu.

Pozrime sa na výpočty:

$\mathrm{obvod}=2Â\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi \times r$

kde r je polomer. Pri okruhu 150 je obvod:

$\begin{array}{}\mathrm{obvod}=2Â\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi \times \mathrm{150}\\ \mathrm{obvod}=\mathrm{942,48}\end{array}$

Ak ho rozdelíme o 2, získame 471,24 pre polopriehľad, takže hodnota zdvihu dasharray vlastnosť pre polkruhový obrys v kruhu s polomerom 150 je 471, 943. Tento polokruh sa použije na označenie zóny nízkeho rozsahu meradla.

Ako môžete vidieť, je to hore nohami, takže obráťte SVG nahor pridaním premeniť Vlastnosť CSS s hodnotou rotateX (180 stupňov) na Prvok HTML.

 #meter transform: rotateX (180deg); 

4. Pridajte ďalšie zóny

strednej zóne (modrá) musí pokrývať ⅔ časť polkruhu a ⅔ 471 je 314. Takže pridáme ďalší kruh do nášho SVG pomocou zdvihu dasharray majetok opäť, ale teraz s hodnotou 314, 943.

  < /circle>  

konečná zóna (červená) musí zakrývať poslednú ⅓ časť polkruhu a ⅓ 471 je 157, takže túto hodnotu pripočítame k zdvihu dasharray vlastnosť tretieho kruhu.

5. Pridajte obrys meracieho prístroja

Pridajme do merača šedý obrys, aby to vyzeralo lepšie. dĺžka čiarky obrysovej kružnice musí byť rovné polovici obvodu. Predložíme ho pred všetky ostatné kruhy v kóde, takže to bude vykreslil najprv prehliadač, a preto bude zobrazené pod kruhmi regiónu na obrazovke.

mŕtvice šírky majetok musí byť o niečo väčší ako v ostatných kruhoch, aby sa vytvoril reálny obrys.

     < /circle>      

Obrys končí

Keďže obrys nepokrýva konce polkruhu, pridáme aj 2 riadky s rozmermi asi 2px na koncoch pridaním ďalšieho kruhu s dĺžka čiarky z 2px a dĺžka medzery polovičného obvodu mínus 2px. Preto hodnota hodnoty zdvihu dasharray vlastnosť tohto kruhu je 2, 469.

maskovať

Teraz po zóne nízky, priemerný a vysoký rozsah pridáme ďalší kruh. Nový kruh bude fungovať ako maska ​​na skrytie zbytočných oblastí zóny, keď sa bude prevádzkovať meradlo.

Jeho vlastnosti budú rovnaké ako vlastnosti obrysu a jeho farba tahu bude tiež šedá. Maska bude neskôr zmenená pomocou Javascriptu, aby sa odhalili zóny pod ním v reakcii na vstupný posuvník.

Doterajší kombinovaný kód je uvedený nižšie.

Ak chceme odhaliť región pod maskou, potrebujeme znížiť veľkosť masky dĺžka čiarky. Napríklad, keď hodnota zdvihu dasharray Vlastnosť kruhu masky je 157, 943, oblúky zostanú v nasledujúcom stave:

Takže všetko, čo teraz musíme urobiť, je upraviť zdvihu dasharray masky pomocou JavaScript na animáciu. Ale skôr ako to urobíme, ako som už uviedol, pre môj posledný demo som použil CSS a JavaScript na výpočet a pridanie väčšiny vlastností SVG.

Nižšie nájdete kód HTML, CSS a JavaScript, ktorý vedie k rovnakému výsledku ako vyššie.

HTML

Pridal som ihlový obrázok (kalibračné needle.svg), posuvník rozsahu (input # slider) na vstup používateľa a štítok (Štítok # LBL), aby sa zobrazila hodnota posúvača v rozmedzí 0-100.

    0 
 

CSS

Nižšie uvedený kód CSS pridá SVG pravidlá štýlu, pretože tvary SVG môžu byť štylizované rovnako ako prvky HTML. Ak sa chcete dozvedieť viac o tom, ako napísať SVG so službou CSS, pozrite si tento príspevok. Pre styling jazdca, pozrite sa na tento príspevok.

 #wrapper pozícia: relatívna; marža: auto;  #meter šírka: 100%; výška: 100%; transformácia: rotateX (180deg);  .circle fill: none;  .outline, #mask zdvih: # F1F1F1; šírka zdvihu: 65;  .rozsah šírka-zdvih: 60;  #slider, #lbl pozícia: absolútna;  #slider kurzor: ukazovateľ; vľavo: 0; marža: auto; doprava: 0; top: 58%; šírka: 94%;  #lbl farba pozadia: # 4B4C51; okraj polomeru: 2px; farba: biela; font-family: "nový kuriér"; veľkosť písma: 15pt; font-weight: tučné; polstrovanie: 4px 4px 2px 4px; pravá: -48px; top: 57%;  #meter_needle výška: 40%; vľavo: 0; marža: auto; poloha: absolútna; doprava: 0; najlepších 10%; transform-origin: spodný stred; / * orientácia fix * / transform: otočenie (270deg); 

JavaScript

V jazyku JavaScript najprv vypočítame a nastavíme rozmery obálky a všetkých oblúkov, potom pridáme príslušné zdvihu dasharray hodnoty do kruhov. Potom budeme viazať vlastnú udalosť na posúvač rozsahu, aby sme vykonali animáciu.

 / * Nastaviť polomer pre všetky kruhy * / var r = 250; var circles = document.querySelectorAll ("kruh"); var total_circles = circles.length; pre (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); 

Vlastné range_change_event () funkcie

Chovanie meradla je vykonávané range_change_event () vlastnú funkciu, ktorá je zodpovedná za úpravu veľkosti masky a animácie ihly.

Zaberá sa hodnota posuvníka (vstup pre užívateľa), ktorá sa pohybuje medzi 0-100, prevádza ju na ekvivalent polomeru obvodu (meter_value) hodnoty medzi 471-0 (471 je polomer obvodu pre polomer 150) a nastaví to meter_value ako dĺžka čiarky masky zdvihu dasharray vlastnosť.

range_change_event () vlastná funkcia tiež otočí ihlu po prevode užívateľského vstupu (prichádzajúceho do rozsahu 0-100) do stupňa ekvivalentu 0-180.

270 ° sa pridáva k rotácii ihly vo vyššie uvedenom kóde, pretože obrázok, ktorý som použil, je zvislej ihly a musel som ju najskôr otočiť o 270 °, aby som ležal rovný naľavo.

Nakoniec som zaviazal range_change_event () funkciu posúvača rozsahu, aby bolo možné s ním pracovať s meracím prístrojom.

Pozrite sa na stránku demonštrácie alebo sa pozrite na zdrojový kód v našom Úložisko Github.