Hogyan készítsünk animált SVG sebességmérőt

A mérőóra olyan eszköz, amely vizuálisan jelzi az adott tartományon belüli értéket. A számítógépekben a “lemezterület-jelző” egy mérőmérőt használ, hogy megmutassa, mennyi lemezterületet használ a rendelkezésre álló teljes mennyiségtől. A mérőműszerek a tartományon belül zónákat vagy régiókat tartalmaznak, amelyek mindegyike saját színével különbözik. A front-end fejlesztés során használhatjuk a HTML5 címke az adott tartományon belüli adatok megjelenítéséhez.

Ebben a bejegyzésben egy SVG mérőóra félkör alakú, és animálja. Nézd meg ezt a GIF-előnézetet hogyan működik a végleges verzió a Firefoxban:

A mérő tartomány 0-100, és megjelenik három egyenlő zóna sárga, kék és piros. Megváltoztathatja a zónák tartományát és számát az Ön igényei szerint.

A magyarázó célból manuális számításokat végzek, és a következő lépésekben használom az inline SVG attribútumokat / tulajdonságokat.

Végső bemutatóm azonban CSS-t és JavaScript-et használ az SVG tulajdonságok kiszámításához és beillesztéséhez, hogy rugalmasabb legyen.

1. Rajzoljon egy kört

Rajzoljunk egy egyszerű kört az SVG-ben. A HTML5 új a címke lehetővé teszi, hogy az SVG-t közvetlenül a HTML-kódba adjuk. Benne tag, hozzáadjuk a Az SVG alakja így van:

A CSS-ben add hozzá szélesség és magasság a burkolat tulajdonságai, amelyek nagyobbak vagy egyenlőek a kör átmérőjével (példánkban ez 300px). Be kell állítanunk a szélességet és a magasságot is #méter elem 100% -ra.

 #wrapper szélesség: 400px; magasság: 400px;  #meter szélesség: 100%; magasság: 100%; 

2. Adjon körvonalat a körhöz és távolítsa el a kitöltést

A ütés és stroke-szélességű Az SVG tulajdonságok egy körvonalat adnak a körhöz, és a töltse = "none" a tulajdonságot is eltávolítjuk a kör kitöltését is.

3. csak a kör felét takarja

A stroke dasharray Az SVG tulajdonság egy szaggatott vonalat hoz létre, és két értéket vesz fel, kötőjel hossza és rés hossza.

A félkör alakú vázlat esetében a kötőjel hossza az értéknek meg kell egyeznie a kör félkörívével, úgy, hogy a kötőjel a kör kerületének felét lefedi, és a rés hossza az értéknek meg kell egyeznie vagy meg kell haladnia a maradék kerületet.

Ha több, akkor a böngésző átalakítja a fennmaradó kerületre, így a teljes kerületértéket használjuk rés hossza. Így elkerülhetjük a fennmaradó kerület kiszámítását.

Lássuk a számításokat:

$\mathrm{körméret}=2Â\; ??\; Â\; ??\; â¢Â\; ??\; Â\; ??\pi \times r$

hol r a sugár. 150-es sugarú körben a kerület:

$\begin{array}{}\mathrm{körméret}=2Â\; ??\; Â\; ??\; â¢Â\; ??\; Â\; ??\pi \times \mathrm{150}\\ \mathrm{körméret}=\mathrm{942,48}\end{array}$

Ha 2-el osztjuk meg, akkor 471,24-et kapunk félkörméretre, így a stroke dasharray egy félkörös körvonalú ingatlant egy 150 sugarú körben 471, 943. Ez a félkör a mérő alacsony tartományú zónájának jelölésére szolgál.

Amint láthatod, fejjel lefelé van, így kapcsoljuk be az SVG-t a hozzáadásával átalakít CSS tulajdonság a rotateX (180 fokkal lehetőséget) hoz HTML elem.

 #meter transform: rotateX (180deg); 

4. Adja hozzá a többi zónát

A középső zóna (kék) a félkör ⅔ részét kell fedeznie, és a 471 ⅔ értéke 314. Így adjunk hozzá egy másik kört az SVG-hez a stroke dasharray újra, de most az értékével 314, 943.

  < /circle>  

A végső zóna (piros) lefednie kell a félkör utolsó cover részét, és a 471 ⅓ értéke 157, így ezt az értéket hozzáadjuk a stroke dasharray a harmadik kör tulajdonosa.

5. Adja meg a mérő vázlatot

Adjunk hozzá egy szürke körvonalat a mérőhöz, hogy jobban nézzen ki. A kötőjel hossza A körkörös körnek meg kell egyeznie a félkörmérettel. A kód összes többi körének elhelyezése előtt helyezzük el, hogy ez legyen először a böngésző, és ezért lesz a körkörök alatt jelenik meg a képernyőn.

A stroke-szélességű az ingatlannak egy kicsit nagyobbnak kell lennie, mint a többi köré, annak érdekében, hogy valódi vázlat megjelenjen.

     < /circle>      

Szerkezeti végek

Mivel a körvonal nem fedi le a félkör végeit, 2 körvonalat is hozzáadunk 2px-ig a végéhez egy másik kör hozzáadásával kötőjel hossza 2px és a rés hossza a félkörméret mínusz 2px. Ezért a stroke dasharray ennek a körnek a tulajdonsága 2, 469.

Maszk

Most adjunk hozzá egy újabb kört az alacsony, az átlagos és a magas tartományú zónák után. Az új kör maszkként fog működni, hogy elrejtse a felesleges zóna régiókat, amikor a mérőmérő működni fog.

Tulajdonságai ugyanazok lesznek, mint a körvonal köré, és a stroke színe is szürke lesz. A maszk később átméretezhető lesz a Javascript segítségével, hogy felfedje az alatta lévő zónákat a bemeneti csúszkára válaszul.

A kombinált kód eddig az alábbi.

Ha a maszk alatt szeretnénk felfedni egy régiót, csökkentenünk kell a maszk méretét kötőjel hossza. Például, ha a stroke dasharray a maszk kör tulajdonsága 157, 943, az ívek a következő állapotban állnak:

Tehát most mindössze annyit kell tennünk, hogy beállítsuk a stroke dasharray a maszk használata az animációhoz. De mielőtt ezt megtennénk, mint ahogy már említettem, a végső bemutatómhoz CSS-t és JavaScript-et használtam a legtöbb SVG tulajdonság kiszámításához és hozzáadásához.

Az alábbiakban megtalálható a HTML, CSS és JavaScript kód, amely ugyanazzal az eredménnyel jár, mint a fenti.

HTML

Adtam hozzá egy tűt (gauge-needle.svg), egy tartomány-csúszka (bemenet # csúszka) a felhasználói bevitelhez és egy címkéhez (címke # LBL) a csúszkaérték 0-100 tartományban történő megjelenítéséhez.

    0 
 

CSS

Az alábbi CSS-kód stílusszabályokat ad az SVG-hez, mivel az SVG-formák ugyanúgy formázhatók, mint a HTML-elemek. Ha többet szeretne olvasni az SVG-vel a CSS-sel való stílusról, nézze meg ezt a bejegyzést. A csúszka kialakításához nézze meg ezt a bejegyzést.

 #wrapper pozíció: relatív; margó: auto;  #meter szélesség: 100%; magasság: 100%; transzformálás: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; stroke-width: 65;  .köteles stroke-width: 60;  #slider, #lbl pozíció: abszolút;  #slider kurzor: mutató; balra: 0; margó: auto; jobb: 0; top: 58%; szélesség: 94%;  #lbl háttérszín: # 4B4C51; határ-sugár: 2px; fehér szín; font-family: új futár; betűméret: 15pt; font-súly: félkövér; párnázás: 4px 4px 2px 4px; jobbra: -48px; top: 57%;  #meter_needle magasság: 40%; balra: 0; margó: auto; pozíció: abszolút; jobb: 0; legjobb 10%; transzformációs eredet: alsó középpont; / * orientáció fix * / transzformáció: forgatás (270deg); 

JavaScript

A JavaScript-ben először kiszámítjuk és beállítjuk a burkolat és az összes ív méretét, majd hozzáadjuk a megfelelő stroke dasharray értékeket a körökbe. Ezután egyéni eseményt kötünk a tartomány csúszkához az animáció végrehajtásához.

 / * Sugár beállítása minden kör számára * / var r = 250; var circles = document.querySelectorAll ('. kör'); var total_circles = körök.hossz; a (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); 

A szokás range_change_event () Funkció

A mérő viselkedését a range_change_event () egyéni funkció, amely a maszk méretének és a tű animációjának beállításáért felelős.

A csúszkaértéket (felhasználói bemenet) 0-100 között veszi át, átalakítja a félkörív-egyenértékre (meter_value) 471-0 közötti érték (471 a 150-es sugarú félkörméret), és ezt állítja be meter_value mint a kötőjel hossza a maszk stroke dasharray ingatlan.

A range_change_event () az egyéni funkció a tűt a 0-100 fokozatba eső felhasználói bemenet (0-100 tartományba eső) konvertálása után is forgatja..

270 ° -ot adunk a tűk forgatásához a fenti kódban, mert az általam használt kép függőleges tűvel van ellátva, és először 270 ° -kal kellett elforgatni, hogy a lap balra feküdjön.

Végül megkötöztem range_change_event () funkció a tartomány csúszkához, úgyhogy a mérőműszer ezzel együtt működtethető.

Nézd meg a demó vagy nézd meg a forráskódot Github-tároló.