Miten tehdä animoitu SVG-nopeusmittari

mittari on työkalu, joka ilmaisee visuaalisesti arvoa tietyllä alueella. Tietokoneissa a “levytilan ilmaisin” käyttää mittarin avulla, kuinka paljon levytilaa käytetään käytettävissä olevasta kokonaismäärästä. Mittareissa on vyöhykkeitä tai alueita, jotka kukin eriytyvät oman värinsä mukaan. Etupään kehityksessä voimme käyttää HTML5-tunniste näyttää tietoja tietyllä alueella.

Tässä viestissä tehdään SVG-mittari, puolipyöreä, ja animoi se. Tutustu GIF-esikatseluun miten lopullinen versio toimii Firefoxissa:

Mittarin alue on 0-100, ja se näkyy kolme yhtäläistä vyöhykettä keltainen, sininen ja punainen. Voit muuttaa vyöhykkeiden valikoimaa ja määrää tarpeidesi mukaan.

Selitystarkoituksia varten suoritan manuaaliset laskutoimitukset ja käytän inline SVG -määritteitä / ominaisuuksia seuraavissa vaiheissa.

Viimeinen demoni käyttää kuitenkin CSS: ää ja JavaScriptiä SVG-ominaisuuksien laskemiseen ja lisäämiseen, jotta se olisi joustavampi.

1. Piirrä ympyrä

Piirretään yksinkertainen ympyrä SVG: ssä. HTML5 on uusi tag avulla voimme lisätä SVG: n suoraan HTML-koodiin. Sisällä tunniste, lisätään SVG: n muoto:

Lisää CSS: ssä leveys ja korkeus ominaisuuksia kääreeseen, jotka ovat suurempia tai yhtä suuria kuin ympyrän halkaisija (esimerkissä on 300 pikseliä). Meidän on myös asetettava leveys ja korkeus #meter elementti 100%.

 #wrapper leveys: 400px; korkeus: 400px;  #meter leveys: 100%; korkeus: 100%; 

2. Lisää ympyrän ääriviivat ja poista täyttö

Sen avulla tahti ja aivohalvauksen leveys SVG-ominaisuudet lisäävät ympyrän ääriviivat ja käyttämällä alkua = "ei mitään" omaisuus poistamme myös ympyrän täyttämisen.

3. peitä vain puolet ympyrästä

aivohalvauksen dasharray SVG-ominaisuus luo katkoviivan ja ottaa kaksi arvoa, viiva pituus ja aukon pituus.

Puolipyöreiden ääriviivojen osalta viiva pituus arvo on yhtä suuri kuin ympyrän puolikehä, niin että viiva kattaa puolet ympyrän ympärysmitasta ja aukon pituus arvo on joko yhtä suuri tai suurempi kuin jäljellä oleva ympärysmitta.

Kun se on enemmän, se muunnetaan selaimen jäljellä olevaksi ympärysmitaksi, joten käytämme koko kehän arvoa aukon pituus. Näin voimme välttää jäljellä olevan ympärysmitan laskemisen.

Katsotaanko laskelmat:

$\mathrm{ympärysmitta}=2Ã\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi \times R$

missä R on säde. Säteellä 150 on kehä:

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

Jos jaamme sen 2: lla, saadaan 471,24 puolikehälle, joten arvon arvo on aivohalvauksen dasharray puolipyöreän ääriviivan ominaisuus 150 säteen ympyrässä on 471, 943. Tätä puoliriviä käytetään mittarin matalan alueen vyöhykkeen merkitsemiseen.

Kuten näette, se on ylösalaisin, joten kääntäkää SVG ylös lisäämällä muuttaa CSS-ominaisuus, jonka arvo on rotateX (180 ast) että HTML-elementti.

 #meter transform: rotateX (180deg); 

4. Lisää muut vyöhykkeet

keskialue (sininen) on peitettävä puolipyöreän ⅔ osa ja 471: n ⅔ on 314. Lisää siis toinen ympyrä SVG: hen käyttämällä aivohalvauksen dasharray omaisuutta uudelleen, mutta nyt arvolla 314, 943.

  < /circle>  

lopullinen vyöhyke (punainen) on peitettävä viimeinen circle osa ympyrän ympyrästä, ja ⅓ 471 on 157, joten lisäämme tämän arvon aivohalvauksen dasharray kolmannen ympyrän omaisuutta.

5. Lisää mittarin ääriviiva

Lisäämme mittariin harmaa ääriviiva, jotta se näyttää paremmalta. viiva pituus Piirin ympyrän on oltava sama kuin puolikehän. Me asetamme sen ennen kaikkia muita ympyröitä koodiin niin, että se tulee olemaan selaimessa, ja siksi tulee olemaan näytetään alueen piireissä näytöllä.

aivohalvauksen leveys kiinteistön on oltava hieman suurempi kuin muiden piireissä, jotta saadaan aikaan todellinen ääriviiva.

     < /circle>      

Ääriviivat päättyvät

Koska ääriviiva ei kata puolikierron päät, lisäämme myös 2 riviä, jotka ovat noin 2px, lisäämällä toisen ympyrän viiva pituus 2px ja a aukon pituus puolipisteestä miinus 2px. Siksi arvo aivohalvauksen dasharray Tämän ympyrän ominaisuus on 2, 469.

Naamio

Lisää nyt toinen ympyrä matalien, keskimääräisten ja korkean alueen alueiden jälkeen. Uusi ympyrä toimii maskina piilottaakseen tarpeettomat vyöhykealueet, kun mittarimittaria käytetään.

Sen ominaisuudet ovat samat kuin ääriviivalla, ja sen iskun väri on myös harmaa. Maski muutetaan myöhemmin Javascriptillä paljastamaan sen alla olevat vyöhykkeet vasteena tuloliitäntään.

Tähän mennessä yhdistetty koodi on alla.

Jos haluamme paljastaa alueen maskin alla, meidän on vähennettävä maskin kokoa viiva pituus. Esimerkiksi kun arvo aivohalvauksen dasharray maskin ympyrän ominaisuus on 157, 943, kaaret pysyvät seuraavassa tilassa:

Joten meidän on nyt muutettava aivohalvauksen dasharray maskin käyttäminen JavaScriptin avulla animaatiota varten. Mutta ennen kuin teemme sen, kuten aiemmin mainitsin, käytin lopullista demoa varten CSS: ää ja JavaScriptiä useimpien SVG-ominaisuuksien laskemiseksi ja lisäämiseksi.

Alla on HTML-, CSS- ja JavaScript-koodi, joka johtaa samaan tulokseen kuin edellä.

HTML

Lisäsin neulakuvan (mittari-needle.svg), alue-liukusäädin (tulo # liukusäädintä) käyttäjän syöttöön ja tarra (etiketti # LBL) näyttää liukusäätimen arvon välillä 0-100.

    0 
 

CSS

Alla oleva CSS-koodi lisää tyylisääntöjä SVG: hen, koska SVG-muotoja voidaan muotoilla samalla tavalla kuin HTML-elementtejä. Jos haluat lukea lisää SVG: n tyylistä CSS: llä, katso tämä viesti. Jos haluat muotoilla liukusäädintä, tarkista tämä viesti.

 #wrapper position: suhteellinen; marginaali: auto;  #meter leveys: 100%; korkeus: 100%; muunnos: rotateX (180deg);  .circle fill: none;  .outline, #mask aivohalvaus: # F1F1F1; iskunleveys: 65; . järjestää aivohalvaus: 60;  #slider, #lbl sijainti: absoluuttinen;  #slider kohdistin: osoitin; vasen: 0; marginaali: auto; oikea: 0; alkuun: 58%; leveys: 94%;  #lbl taustaväri: # 4B4C51; raja-säde: 2px; väri valkoinen; font-family: ”kuriiri uusi”; kirjasinkoko: 15pt; font-paino: lihavoitu; pehmuste: 4px 4px 2px 4px; oikea: -48px; alkuun: 57%;  #meter_needle korkeus: 40%; vasen: 0; marginaali: auto; asema: absoluuttinen; oikea: 0; 10 parasta%; muunnos-alkuperä: pohja keskellä; / * orientaatio korjata * / muunnos: kiertää (270deg); 

JavaScript

JavaScriptissä lasketaan ja määritetään ensin kääreiden ja kaikkien kaarien mitat, sitten lisätään sopiva aivohalvauksen dasharray arvoja ympyröihin. Tämän jälkeen sidomme mukautetun tapahtuman alueen liukusäätimeen animaation suorittamiseksi.

 / * Aseta säde kaikille piireille * / var r = 250; var circles = document.querySelectorAll ('. ympyrä'); var total_circles = circles.length; varten (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); 

Tapa range_change_event () Toimia

Mittarin käyttäytymistä suorittaa range_change_event () mukautettu toiminto, joka vastaa maskin koon ja neulan animaation säätämisestä.

Se vie liukusäätimen arvon (käyttäjän syöttö), joka on välillä 0-100, muuntaa sen puolikierroksen vastaavaksi (meter_value), joiden arvo on välillä 471-0 (471 on säteen 150 puolikehä) ja asettaa sen meter_value kuin viiva pituus maskin aivohalvauksen dasharray omaisuus.

range_change_event () mukautettu toiminto myös kiertää neulaa sen jälkeen, kun käyttäjän syöttö (0-100-alueelle tuleva) on muunnettu 0-180-asteiseksi..

270 ° lisätään neulan kiertoon edellä mainitussa koodissa, koska käytetyn kuvan kuva on pystysuora neula ja minun piti ensin kääntää sitä 270 °, jotta se olisi tasainen vasemmalle.

Lopuksi sidoin sen range_change_event () toiminnot alue-liukusäätimeen, niin että mittarin voi käyttää sen kanssa.

Tutustu esittely tai tutustu lähdekoodiin meidän Github-arkisto.