Come realizzare un tachimetro SVG animato
UN misuratore di livello è uno strumento che indica visivamente un valore all'interno di un determinato intervallo. Nei computer, a “indicatore di spazio su disco” usa un misuratore di livello per mostrare quanto spazio su disco viene utilizzato dal totale disponibile. Gli indicatori hanno zone o regioni in tutto il suo intervallo, ciascuna differenziata dal proprio colore. Nello sviluppo front-end, possiamo usare il
In questo post, faremo un Misuratore di livello SVG di forma semicircolare, e animalo. Dai un'occhiata a questa anteprima GIF che mostra come funzionerà la versione finale in Firefox:
Il metro l'intervallo è 0-100, e visualizza tre zone uguali in giallo, blu e rosso. È possibile modificare l'intervallo e il numero delle zone in base alle proprie esigenze.
A scopo di spiegazione, eseguirò calcoli manuali e utilizzerò attributi / proprietà SVG in linea nei seguenti passaggi.
La mia demo finale, tuttavia, utilizza CSS e JavaScript per il calcolo e l'inserimento delle proprietà SVG al fine di renderlo più flessibile.
1. Disegna un cerchio
Disegniamo un semplice cerchio in SVG. HTML5 è nuovo tag ci permette di aggiungere SVG direttamente nel codice HTML. Dentro il etichetta, aggiungiamo il
Nel CSS, aggiungiamo larghezza e altezza proprietà al wrapper, entrambe maggiori o uguali al diametro del cerchio (nel nostro esempio è 300 px). Abbiamo anche bisogno di impostare la larghezza e l'altezza del #meter elemento al 100%.
# wrapper width: 400px; altezza: 400 px; #meter width: 100%; altezza: 100%;
2. Aggiungi il contorno al cerchio e rimuovi il riempimento
Con l'aiuto di ictus e stroke-width Proprietà SVG aggiungiamo un contorno al cerchio e usando il riempire = "none" proprietà togliamo anche il riempimento del cerchio.
3. Coprire solo la metà del cerchio
Il ictus dasharray La proprietà SVG crea una struttura tratteggiata e prende due valori, lunghezza del trattino e lunghezza del gap.
Per il contorno del semicerchio, il lunghezza del trattino il valore deve essere uguale alla semi-circonferenza del cerchio, in modo che il trattino copra metà della circonferenza del cerchio e il lunghezza del gap il valore deve essere uguale o maggiore della circonferenza rimanente.
Quando è più, sarà convertito alla circonferenza rimanente dal browser, quindi useremo il valore di circonferenza totale per il lunghezza del gap. In questo modo possiamo evitare di calcolare la circonferenza rimanente.
Vediamo i calcoli:
dove r è il raggio. Per un raggio di 150, la circonferenza è:
Se lo dividiamo per 2, otteniamo 471.24 per semi-circonferenza, quindi il valore di ictus dasharray la proprietà per un contorno di semicerchio in un cerchio di 150 raggi 471, 943. Questo semicerchio verrà utilizzato per indicare la zona di intervallo basso del contatore.
Come puoi vedere, è sottosopra, quindi alziamo SVG aggiungendo il trasformare Proprietà CSS con il valore di rotateX (180 °) al Elemento HTML.
#meter transform: rotateX (180deg);
4. Aggiungi le altre zone
Il zona centrale (blu) deve coprire la parte of del semicerchio, e ⅔ di 471 è 314. Quindi, aggiungiamo un altro cerchio al nostro SVG usando il ictus dasharray proprietà di nuovo, ma ora con il valore di 314, 943.
< /circle>
Il zona finale (rosso) deve coprire l'ultima ⅓ parte del semicerchio, e ⅓ di 471 è 157, quindi aggiungeremo questo valore al ictus dasharray proprietà del terzo cerchio.
5. Aggiungi la struttura del misuratore
Aggiungiamo un contorno grigio al tassametro per farlo sembrare migliore. Il lunghezza del trattino del cerchio del contorno deve essere uguale alla semi-circonferenza. Lo posizioniamo prima di tutti gli altri cerchi nel codice, così sarà reso prima dal browser, e quindi sarà visualizzato sotto i cerchi della regione sullo schermo.
Il stroke-width la proprietà deve essere un po 'più grande di quella degli altri cerchi, in modo da dare l'impressione di un contorno reale.
< /circle>
Fine del profilo
Poiché il contorno non copre le estremità del semicerchio, aggiungiamo anche 2 linee di circa 2px alle estremità aggiungendo un altro cerchio con un lunghezza del trattino di 2px e a lunghezza del gap della semi-circonferenza meno 2px. Quindi il valore del ictus dasharray proprietà di questo cerchio 2, 469.
Maschera
Ora aggiungiamo un altro cerchio dopo le zone di gamma bassa, media e alta. Il nuovo cerchio funzionerà come una maschera per nascondere le zone di zona non necessarie quando verrà utilizzato il misuratore di livello.
Le sue proprietà saranno uguali a quelle del cerchio del contorno e anche il colore del tratto sarà grigio. La maschera verrà successivamente ridimensionata con Javascript per rivelare le zone sottostanti in risposta a un cursore di input.
Il codice combinato finora è il seguente.
Se vogliamo rivelare una regione sotto la maschera, dobbiamo ridurre la dimensione della maschera lunghezza del trattino. Ad esempio, quando il valore del ictus dasharray la proprietà del cerchio maschera è 157, 943, gli archi si troveranno nello stato seguente:
Quindi, tutto ciò che dobbiamo fare ora è regolare il ictus dasharray della maschera utilizzando JavaScript per l'animazione. Ma prima di farlo, come ho detto prima, per la mia demo finale ho usato CSS e JavaScript per calcolare e aggiungere la maggior parte delle proprietà SVG.
Di seguito puoi trovare il codice HTML, CSS e JavaScript che porta allo stesso risultato di cui sopra.
HTML
Ho aggiunto un'immagine ad ago (Calibro-needle.svg), un cursore di intervallo (Ingresso # cursore) per l'input dell'utente e un'etichetta (etichetta # LBL) per visualizzare il valore del cursore nell'intervallo 0-100.
CSS
Il codice CSS seguente aggiunge le regole di stile all'SVG, poiché le forme SVG possono essere stilizzate allo stesso modo degli elementi HTML. Se vuoi saperne di più su come stile SVG con CSS, dai un'occhiata a questo post. Per lo styling del dispositivo di scorrimento, controlla questo post.
# wrapper position: relative; margine: auto; #meter width: 100%; altezza: 100%; transform: ruotareX (180 gradi); .circle fill: none; .outline, #mask stroke: # F1F1F1; larghezza del tratto: 65; .range larghezza del tratto: 60; #slider, #lbl position: absolute; #slider cursor: pointer; a sinistra: 0; margine: auto; a destra: 0; in alto: 58%; larghezza: 94%; #lbl background-color: # 4B4C51; border-radius: 2px; colore bianco; font-family: 'corriere nuovo'; font-size: 15pt; font-weight: bold; imbottitura: 4px 4px 2px 4px; a destra: -48px; superiore: 57%; #meter_needle height: 40%; a sinistra: 0; margine: auto; posizione: assoluta; a destra: 0; superiore: 10%; trasformazione-origine: centro in basso; / * correzione di orientamento * / trasformazione: ruota (270 gradi);
JavaScript
Nel JavaScript, prima calcoliamo e impostiamo le dimensioni del wrapper e di tutti gli archi, quindi aggiungiamo l'appropriato ictus dasharray valori ai cerchi. Dopodiché, legheremo un evento personalizzato al dispositivo di scorrimento dell'intervallo per eseguire l'animazione.
/ * Imposta il raggio per tutti i cerchi * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; per (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); La dogana range_change_event () Funzione
Il comportamento del misuratore viene eseguito dal range_change_event () funzione personalizzata che è responsabile della regolazione della dimensione della maschera e dell'animazione dell'ago.
Prende il valore del cursore (input dell'utente) che è compreso tra 0 e 100, lo converte nell'equivalente di semi-circonferenza (meter_value) di un valore compreso tra 471-0 (471 è la semi-circonferenza per raggio 150) e lo imposta meter_value come il lunghezza del trattino della maschera ictus dasharray proprietà.
Il range_change_event () la funzione personalizzata ruota anche l'ago dopo aver convertito l'input dell'utente (compreso nell'intervallo 0-100) al suo equivalente in gradi di 0-180.
270 ° viene aggiunto alla rotazione dell'ago nel codice sopra perché l'immagine che ho usato è di un ago verticale e ho dovuto ruotarlo inizialmente di 270 ° per farlo distendere piatta alla sua sinistra.
Alla fine, ho legato il range_change_event () funzione sul cursore del range, in modo che il misuratore di livello possa essere utilizzato con esso.
Guarda il dimostrazione o dare un'occhiata al codice sorgente presso il nostro Repository Github.
