Jak zrobić animowany prędkościomierz SVG

ZA miernik grubości to narzędzie, które wizualnie wskazuje wartość w danym zakresie. W komputerach: “wskaźnik miejsca na dysku” używa miernika miernika, aby pokazać, ile miejsca na dysku jest używane z całkowitej dostępnej ilości. Wskaźniki mają strefy lub regiony w całym zakresie, z których każdy jest zróżnicowany według własnego koloru. W rozwoju front-end możemy użyć Tag HTML5 do wyświetlania danych w określonym zakresie.

W tym poście zrobimy Miernik miernika SVG o kształcie półkolistym, i ożyw to. Spójrz na ten podgląd GIF, który pokazuje jak ostateczna wersja będzie działać w Firefoksie:

Licznik zakres wynosi 0-100, i wyświetla się trzy równe strefy w kolorze żółtym, niebieskim i czerwonym. Możesz zmienić zakres i liczbę stref zgodnie z własnymi potrzebami.

Dla celów wyjaśnienia wykonam obliczenia ręczne i użyję wbudowanych atrybutów / właściwości SVG w następujących krokach.

Moje ostatnie demo używa jednak CSS i JavaScript do obliczania i wstawiania właściwości SVG, aby uczynić go bardziej elastycznym.

1. Narysuj okrąg

Narysujmy prosty okrąg w SVG. Nowy HTML5 tag pozwala nam dodać SVG bezpośrednio do kodu HTML. W środku tag, dodajemy Kształt SVG w ten sposób:

W CSS dodajmy szerokość i wysokość właściwości opakowania, zarówno większe, jak i równe średnicy okręgu (w naszym przykładzie jest to 300px). Musimy także ustawić szerokość i wysokość #metr element do 100%.

 #wrapper width: 400px; wysokość: 400px;  #meter width: 100%; wysokość: 100%; 

2. Dodaj kontur do okręgu i usuń wypełnienie

Z pomocą uderzenie i szerokość obrysu Właściwości SVG dodajemy kontur do okręgu i za pomocą fill = "none" właściwość usuwamy również wypełnienie okręgu.

3. pokrywają tylko połowę okręgu

The stroke-dasharray Właściwość SVG tworzy przerywany kontur i przyjmuje dwie wartości, długość kreski i długość przerwy.

Dla konturu półkola długość kreski wartość musi być równa półokręgowi okręgu, tak aby myślnik obejmował połowę obwodu koła, a długość przerwy wartość musi być równa lub większa niż pozostały obwód.

Gdy będzie więcej, zostanie on przekonwertowany na pozostałe obwody przez przeglądarkę, dlatego użyjemy pełnej wartości obwodu dla długość przerwy. W ten sposób możemy uniknąć obliczania pozostałego obwodu.

Zobaczmy obliczenia:

$\mathrm{obwód}=2Ã\; ??\; Â\; ??\; âÂ\pi \times r$

gdzie r jest promieniem. Dla promienia 150 obwód wynosi:

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

Jeśli podzielimy go przez 2, otrzymamy 471,24 na półobwód, więc wartość stroke-dasharray właściwość konturu półkola w okręgu o promieniu 150 wynosi 471 943. To półkole będzie używane do oznaczenia strefy niskiego zasięgu miernika.

Jak widzisz, jest to do góry nogami, więc włącz SVG, dodając przekształcać Właściwość CSS o wartości rotateX (180 stopni) do Element HTML.

 #meter transform: rotateX (180deg); 

4. Dodaj inne strefy

The środkowa strefa (niebieski) musi pokrywać część circle półkola, a ⅔ z 471 wynosi 314. Więc dodajmy kolejny okrąg do naszego SVG, używając stroke-dasharray ponownie, ale teraz z wartością 314 943.

  < /circle>  

The ostatnia strefa (czerwony) musi pokryć ostatnią ⅓ część półkola, a ⅓ z 471 wynosi 157, więc dodamy tę wartość do stroke-dasharray właściwość trzeciego okręgu.

5. Dodaj kontur miernika

Dodajmy szary kontur do miernika, aby wyglądał lepiej. The długość kreski okręgu zarysu musi być równy półokręgowi. Umieszczamy go przed wszystkimi innymi kręgami w kodzie, tak aby był renderowane najpierw przez przeglądarkę, i dlatego będzie wyświetlane pod okręgami regionu na ekranie.

The szerokość obrysu właściwość musi być nieco większa niż pozostałych kręgów, aby nadać wygląd prawdziwemu zarysowi.

     < /circle>      

Koniec konspektu

Ponieważ kontur nie pokrywa końców półkola, dodajemy również 2 linie około 2px do końców, dodając kolejny okrąg z długość kreski 2px i a długość przerwy półokresu minus 2px. Dlatego wartość stroke-dasharray właściwość tego kręgu to 2, 469.

Maska

Dodajmy teraz kolejny okrąg po strefach niskich, średnich i wysokich. Nowe koło będzie działać jako maska, aby ukryć niepotrzebne obszary strefy, gdy miernik miernika będzie obsługiwany.

Jego właściwości będą takie same jak w okręgu zarysu, a jego kolor obrysu będzie również szary. Maska zostanie później zmieniona za pomocą Javascript, aby odsłonić strefy pod nią w odpowiedzi na suwak wejściowy.

Dotychczasowy kod połączony jest jak poniżej.

Jeśli chcemy ujawnić obszar pod maską, musimy zmniejszyć rozmiar maski długość kreski. Na przykład, gdy wartość stroke-dasharray właściwością okręgu maski jest 157, 943, łuki staną w następującym stanie:

Więc wszystko, co musimy teraz zrobić, to dostosować stroke-dasharray maski za pomocą JavaScript do animacji. Ale zanim to zrobimy, jak już wspomniałem wcześniej, do mojego demo użyłem CSS i JavaScript do obliczenia i dodania większości właściwości SVG.

Poniżej znajdziesz kod HTML, CSS i JavaScript, który prowadzi do tego samego wyniku, jak powyżej.

HTML

Dodałem obraz igły (gauge-needle.svg), suwak zasięgu (suwak wejścia #) do danych wejściowych użytkownika i etykiety (etykieta # lbl), aby wyświetlić wartość suwaka w zakresie 0-100.

    0 
 

CSS

Poniższy kod CSS dodaje reguły stylu do SVG, ponieważ kształty SVG można stylizować tak samo jak elementy HTML. Jeśli chcesz dowiedzieć się więcej na temat stylizacji SVG za pomocą CSS, spójrz na ten post. Aby stylizować suwak, sprawdź ten post.

 #wrapper position: relative; margin: auto;  #meter width: 100%; wysokość: 100%; transformacja: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; szerokość skoku: 65;  .range stroke-width: 60;  #slider, #lbl position: absolute;  #slider cursor: pointer; po lewej: 0; margin: auto; po prawej: 0; do góry: 58%; szerokość: 94%;  #lbl background-color: # 4B4C51; border-radius: 2px; kolor biały; font-family: „kurier nowy”; rozmiar czcionki: 15pt; waga czcionki: pogrubiona; dopełnienie: 4px 4px 2px 4px; prawo: -48px; do góry: 57%;  #meter_needle height: 40%; po lewej: 0; margin: auto; pozycja: absolutna; po prawej: 0; do góry: 10%; transform-origin: dolny środek; / * poprawka orientacji * / transform: rotate (270deg); 

JavaScript

W JavaScript najpierw obliczamy i ustawiamy wymiary opakowania i wszystkich łuków, a następnie dodajemy odpowiednie stroke-dasharray wartości dla kręgów. Następnie będziemy wiązać niestandardowe zdarzenie z suwakiem zakresu, aby wykonać animację.

 / * Ustaw promień dla wszystkich okręgów * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; for (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); 

Niestandardowy range_change_event () Funkcjonować

Zachowanie miernika jest wykonywane przez range_change_event () funkcja niestandardowa, która odpowiada za regulację rozmiaru maski i animację igły.

Przyjmuje wartość suwaka (dane wejściowe użytkownika), która mieści się w przedziale 0-100, przekształca ją na równoważnik półokresowy (wartość_metru) o wartości między 471-0 (471 to półobwód dla promienia 150) i ustawia to wartość_metru jak długość kreski maski stroke-dasharray własność.

The range_change_event () Funkcja niestandardowa obraca również igłę po konwersji danych wejściowych użytkownika (w zakresie 0-100) do poziomu odpowiadającego 0-180.

270 ° jest dodawany do obrotu igły w powyższym kodzie, ponieważ obraz, którego użyłem jest z pionowej igły i musiałem początkowo obrócić go o 270 °, aby leżał płasko na lewo.

Wreszcie związałem range_change_event () działa na suwak zasięgu, dzięki czemu można go używać z miernikiem.

Sprawdź próbny lub spójrz na kod źródłowy w naszym Repozytorium Github.