Jak vytvořit animovaný SVG otáčkoměr

A měřidlo je nástroj, který vizuálně označuje hodnotu v daném rozsahu. V počítačích “indikátor místa na disku” používá měřidlo měřidla k zobrazení, kolik místa na disku je použito z celkového počtu dostupných. Měřidla mají zóny nebo oblasti napříč svým rozsahem, z nichž každá je odlišena vlastní barvou. Ve frontendovém vývoji můžeme použít HTML5 tag pro zobrazení dat v určitém rozsahu.

V tomto příspěvku uděláme SVG měřidlo polokruhového tvaru, a animovat. Podívejte se na tento náhled GIF, který ukazuje jak bude finální verze fungovat ve Firefoxu:

Měřič je rozsah je 0-100, a zobrazí se tři stejné zóny ve žluté, modré a červené barvě. Rozsah a počet zón můžete změnit podle svých potřeb.

Pro účely vysvětlení provedu ruční výpočty a v následujících krocích použiji vložené atributy SVG.

Moje poslední demo však používá CSS a JavaScript pro výpočet a vkládání SVG vlastností, aby byl flexibilnější.

1. Nakreslete kruh

Nakreslíme jednoduchý kruh v SVG. Nové HTML5 tag nám umožňuje přidat SVG přímo do HTML kódu. Uvnitř tag, přidáme Tvar SVG:

V CSS přidejme šířka a výška vlastnosti obálky, obě větší nebo rovné průměru kruhu (v našem příkladu je to 300px). Také musíme nastavit šířku a výšku #Metr prvek na 100%.

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

2. Přidejte obrys kružnici a odstraňte výplň

S pomocí mrtvice a šířka zdvihu Vlastnosti SVG přidáme kružnici obrys a pomocí fill = "none" vlastnost odstraníme také výplň kruhu.

3. pokrývají pouze polovinu kruhu

mrtvice-pomlčka Vlastnost SVG vytváří čárkovaný obrys a má dvě hodnoty, délka pomlčky a délka mezery.

Pro obrys půlkruhu, délka pomlčky hodnota musí být rovna polovičnímu obvodu kruhu, takže pomlčka pokrývá polovinu obvodu kruhu a délka mezery hodnota musí být buď rovna nebo větší než zbývající obvod.

Pokud je to více, bude prohlížeč převeden na zbývající obvod, proto použijeme celou hodnotu obvodu délka mezery. Tímto způsobem se můžeme vyhnout výpočtu zbývajícího obvodu.

Podívejme se na výpočty:

$obvod = 2 Ã? Â? Ã¢Â ?? π \times r$

kde r je poloměr. Pro poloměr 150 je obvod:

$\begin{matrix} obvod = 2 Ã? Â? Ã¢Â ?? π \times 150 \\ obvod = 942,48 \end{matrix}$

Pokud ji rozdělíme na 2, dostaneme 471,24 pro semifinále, tedy hodnotu mrtvice-pomlčka vlastnost pro půlkruhový obrys v kruhu o poloměru 150 mm 471, 943. Tento polokruh bude použit k označení zóny nízkého rozsahu měřidla.

Jak vidíte, je to vzhůru nohama, takže přidáme přeměnit Vlastnost CSS s hodnotou rotateX (180deg) na HTML element.

 #meter transformace: rotateX (180deg);

4. Přidejte další zóny

střední zóna (modrá) musí pokrýt ⅔ část půlkruhu a ⅔ 471 je 314. Takže přidejte další kruh do SVG pomocí mrtvice-pomlčka vlastnictví, ale nyní s hodnotou 314, 943.

  < /circle>

poslední zóna (červená) musí pokrýt poslední ⅓ část půlkruhu a ⅓ 471 je 157, takže tuto hodnotu přidáme do mrtvice-pomlčka vlastnictví třetího kruhu.

5. Přidání osnovy měřidla

Přidejme k metru šedý obrys, aby to vypadalo lépe. délka pomlčky obrysu obrysu musí být roven polovičnímu obvodu. Umístíme ho před všechny ostatní kruhy v kódu, takže to bude prohlížeče, a proto bude pod kruhy regionu na obrazovce.

šířka zdvihu majetek musí být o něco větší než majetek ostatních kruhů, aby se objevil skutečný obrys.

     < /circle>

Konec osnovy

Vzhledem k tomu, že obrys nepokrývá konce půlkruhu, přidáme ke koncům také 2 řádky o délce přibližně 2 x 2 x. délka pomlčky 2px a a délka mezery semi-obvodu minus 2px. Proto hodnota mrtvice-pomlčka vlastnost tohoto kruhu je 2, 469.

Maska

Nyní přidáme další kruh za zónami nízkého, průměrného a vysokého rozsahu. Nový kruh bude fungovat jako maska pro skrytí nepotřebných oblastí zóny, když bude měřidlo měřidla provozováno.

Jeho vlastnosti budou stejné jako vlastnosti obrysu obrysu a jeho barva tahu bude také šedá. Maska bude později změněna pomocí Javascriptu, aby se zobrazily zóny pod ní v odezvě na vstupní posuvník.

Kombinovaný kód je zatím uveden níže.

Pokud chceme odhalit oblast pod maskou, musíme zmenšit velikost masky délka pomlčky. Například, když hodnota mrtvice-pomlčka vlastnost masky masky je 157, 943, oblouky budou stát v následujícím stavu:

Takže vše, co teď musíme udělat, je přizpůsobit mrtvice-pomlčka masky pomocí JavaScriptu pro animaci. Ale než to uděláme, jak jsem se zmínil dříve, pro mé poslední demo jsem použil CSS a JavaScript pro výpočet a přidání většiny SVG vlastností.

Níže naleznete kód HTML, CSS a JavaScript, který vede ke stejnému výsledku jako výše.

HTML

Přidal jsem obrázek jehly (gauge-needle.svg), posuvník rozsahu (input # slider) na vstup uživatele a štítek (label # lbl) pro zobrazení hodnoty posuvníku v rozsahu 0-100.

CSS

Níže uvedený kód CSS přidává do SVG pravidla stylu, protože tvary SVG lze stylizovat stejným způsobem jako prvky HTML. Chcete-li se dozvědět více o stylu SVG pomocí CSS, podívejte se na tento příspěvek. Pro styling jezdce, podívejte se na tento post.

 #wrapper position: relativní; okraj: auto;  #meter width: 100%; výška: 100%; transformace: rotateX (180deg);  .circle fill: none;  .outline, #mask tah: # F1F1F1; šířka tahu: 65;  .range tahová šířka: 60;  #slider, #lbl pozice: absolutní;  #slider kurzor: ukazatel; vlevo: 0; okraj: auto; vpravo: 0; nahoru: 58%; šířka: 94%;  #lbl background-color: # 4B4C51; hraniční rádius: 2px; barva bílá; font-family: 'courier new'; velikost písma: 15pt; font-weight: tučné; polstrování: 4px 4px 2px 4px; vpravo: -48px; nahoru: 57%;  #meter_needle výška: 40%; vlevo: 0; okraj: auto; pozice: absolutní; vpravo: 0; nejlepších 10%; transformační původ: střed dna; / * fix fix * / transform: rotovat (270deg);

JavaScript

V JavaScriptu nejprve spočítáme a nastavíme rozměry obalu a všech oblouků, pak přidáme příslušné mrtvice-pomlčka hodnoty do kruhů. Poté budeme vázat vlastní událost na posuvník rozsahu, abychom mohli provést animaci.

 / * Nastavte poloměr pro všechny okruhy * / var r = 250; var circles = document.querySelectorVšechno ('.kruh'); var total_circles = circles.length; pro (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);

Zvyk `range_change_event ()` Funkce

Chování elektroměru provádí range_change_event () Vlastní funkce, která je zodpovědná za úpravu velikosti masky a animace jehly.

Trvá hodnotu posuvníku (vstup uživatele), která je mezi 0-100, převádí ji na ekvivalent semi-obvodu (meter_value) hodnoty mezi 471-0 (471 je poloobvod pro poloměr 150) a nastavuje to meter_value jako délka pomlčky masky mrtvice-pomlčka vlastnictví.

range_change_event () vlastní funkce také otáčí jehlu po převodu vstupu uživatele (v rozsahu 0-100) na jeho stupeň ekvivalentu 0-180.

270 ° je přidáno k rotaci jehly ve výše uvedeném kódu, protože obraz, který jsem použil, má vzpřímenou jehlu a musel jsem ji zpočátku otočit o 270 ° tak, aby ležel rovně vlevo.

Konečně jsem svázala range_change_event () funkci posuvníku rozsahu tak, aby s ním mohl být provozován měřidlo.

Podívejte se na demo nebo se podívejte na zdrojový kód na našem webu Repozitář Github.