Как да направим анимационен SVG скоростомер

А измервателен уред е инструмент, който визуално показва стойност в даден диапазон. В компютрите: a “индикатор за дисково пространство” използва измервателен уред, за да покаже колко дисково пространство се използва от наличното общо. Манометрите имат зони или региони в целия му обхват, като всеки от тях се различава по собствен цвят. В предната част на развитието, можем да използваме HTML5 таг за показване на данни в определен диапазон.

В тази публикация ще направим SVG габарит с полукръгла форма, и го анимирайте. Разгледайте този GIF, който се показва как ще работи окончателната версия в Firefox:

Уредът диапазон е 0-100, и се показва три равни зони в жълто, синьо и червено. Можете да променяте обхвата и броя на зоните според вашите нужди.

За целите на обяснението, ще извърша ръчни изчисления и ще използвам атрибути / свойства вградени SVG в следните стъпки.

Последното ми демо обаче използва CSS и JavaScript за изчисляване и вмъкване на SVG свойства, за да стане по-гъвкава.

1. Начертайте кръг

Нека нарисуваме обикновен кръг в SVG. HTML5 е нов tag ни позволява да добавим SVG направо в HTML кода. Вътре добавяме Формата на SVG така:

В CSS, нека добавим широчина и височина свойства на обвивката, по-големи или равни на диаметъра на кръга (това е 300px в нашия пример). Също така трябва да зададем ширината и височината на #meter елемент до 100%.

 #wrapper width: 400px; височина: 400px;  #meter ширина: 100%; височина: 100%; 

2. Добавете контур към кръга и премахнете запълването

С помощта на. \ T удар и инсулт ширина Свойствата SVG добавяме контур към кръга и с помощта на попълнете = "никой" собственост ние също така премахваме запълването на кръга.

3. покриват само половината от кръга

Най- инсулт-dasharray Свойството SVG създава прекъснат контур и взема две стойности, тире и дължина на процепа.

За контура с полукръг: тире стойността трябва да бъде равна на полукръга на окръжността, така че тирето да покрива половината от обиколката на окръжността и дължина на процепа стойността трябва да бъде равна или по-голяма от оставащата обиколка.

Когато е повече, тя ще бъде преобразувана в останалата обиколка от браузъра, затова ще използваме пълната стойност на обиколката за дължина на процепа. По този начин можем да избегнем изчисляването на оставащата обиколка.

Да видим изчисленията:

$\mathrm{обиколка}=2А\; ??\; а\; ??\; âА\; ??\; а\; ??\pi \times R$

където R е радиусът. За радиус 150, обиколката е:

$\begin{array}{}\mathrm{обиколка}=2А\; ??\; а\; ??\; âА\; ??\; а\; ??\pi \times \mathrm{150}\\ \mathrm{обиколка}=\mathrm{942,48}\end{array}$

Ако я разделим с 2, получаваме 471.24 за полу-обиколка, така че стойността на инсулт-dasharray Свойство за полукръг контур в 150 радиус кръг е 471, 943. Този полукръг ще бъде използван за обозначаване на зоната на ниския обхват на измервателния уред.

Както виждате, това е с главата надолу, така че нека да превърнем SVG нагоре, като добавим трансформиране CSS собственост със стойността на rotateX (180deg) към HTML елемент.

 #meter transform: rotateX (180deg); 

4. Добавете други зони

Най- средна зона (синьо) трябва да покрива ⅔ частта от полукръга, а 47 от 471 е 314. Така че нека добавим още един кръг към нашия SVG, като използваме инсулт-dasharray собственост отново, но сега със стойността на 314, 943.

  < /circle>  

Най- крайната зона (червено) трябва да покрива последната ⅓ част от полукръга, а ⅓ от 471 е 157, така че ще добавим тази стойност към инсулт-dasharray собственост на третия кръг.

5. Добавете очертанието на метър

Нека добавим сив контур към глюкомера, за да изглежда по-добре. Най- тире на контурния кръг трябва да бъде равен на полу-обиколката. Ние го поставяме пред всички останали кръгове в кода, така че ще бъде изведени първо от браузъра, и следователно ще бъде се показват под кръговете на региона на екрана.

Най- инсулт ширина собствеността трябва да бъде малко по-голяма от тази на другите кръгове, за да придаде вид на истински контур.

     < /circle>      

Край на контура

Тъй като контурът не покрива краищата на полукръга, добавяме и 2 реда от около 2 пиксела към края, като добавяме друг кръг с тире от 2px и a дължина на процепа от полу-обиколката минус 2px. Следователно стойността на инсулт-dasharray собственост на този кръг 2, 469.

маска

Сега да добавим още един кръг след ниските, средните и високите зони. Новият кръг ще функционира като маска, за да скрие ненужните зони, когато измервателният уред ще работи.

Неговите свойства ще бъдат същите като тези на очертания кръг, а цветът му на удар ще бъде и сив. Маската по-късно ще бъде преоразмерена с Javascript, за да разкрие зоните под него в отговор на входен плъзгач.

Комбинираният код досега е както по-долу.

Ако искаме да разкрием област под маската, трябва да намалим размера на маската тире. Например, когато стойността на инсулт-dasharray собственост на маската кръг 157, 943, дъгите ще стоят в следното състояние:

Така че всичко, което трябва да направим сега, е да нагласим инсулт-dasharray на маската с помощта на JavaScript за анимация. Но преди да направим това, както споменах по-рано, за последното си демо използвах CSS и JavaScript за изчисляване и добавяне на повечето от свойствата на SVG.

По-долу можете да намерите кода на HTML, CSS и JavaScript, който води до същия резултат, както по-горе.

HTML

Аз добавих изображение на игла (габарит-needle.svg), плъзгач за обхват (вход # плъзгач) към потребителския вход и етикет (етикет # LBL) за показване на стойността на плъзгача в диапазона 0-100.

    0 
 

CSS

CSS кодът по-долу добавя правила за стила към SVG, тъй като SVG формите могат да бъдат оформени по същия начин като HTML елементи. Ако искате да прочетете повече за стила на SVG с CSS, погледнете този пост. За оформяне на плъзгача проверете тази публикация.

 #wrapper position: relative; марж: автоматично;  #meter ширина: 100%; височина: 100%; transform: rotateX (180deg);  .circle fill: none;  .outline, #mask инсулт: # F1F1F1; ширина на хода: 65;  .range ширина на инсулта: 60;  #slider, #lbl позиция: абсолютна;  #slider курсор: указател; наляво: 0; марж: автоматично; вдясно: 0; отгоре: 58%; ширина: 94%;  #lbl фонов цвят: # 4B4C51; граничен радиус: 2px; цвят: бял; семейство на шрифтовете: „courier new“; размер на шрифта: 15pt; тегло на шрифта: удебелен; подложка: 4px 4px 2px 4px; дясно: -48px; отгоре: 57%;  #meter_needle височина: 40%; наляво: 0; марж: автоматично; позиция: абсолютна; вдясно: 0; Топ 10%; произход на трансформация: долния център; / * ориентация fix * / transform: завъртане (270deg); 

JavaScript

В JavaScript първо изчисляваме и задаваме размерите на обвивката и всички дъги, след което добавяме подходящото инсулт-dasharray стойности за кръговете. След това ще свържем персонализирано събитие с плъзгача за обхвата, за да изпълним анимацията.

 / * Задайте радиус за всички кръгове * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = кръгове. за (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); 

По избор range_change_event () функция

Поведението на измервателния уред се извършва от range_change_event () персонализирана функция, която отговаря за регулирането на размера на маската и анимацията на иглата.

Отнема стойността на плъзгача (потребителски вход), която е между 0-100, превръща го в еквивалент на полу-обиколка (meter_value) на стойност между 471-0 (471 е полу-обиколката за радиус 150) и определя това meter_value като тире на маската инсулт-dasharray Имот.

Най- range_change_event () функцията по избор също завърта иглата след конвертиране на потребителския вход (идващ в обхвата 0-100) до неговия еквивалент на степен 0-180.

270 ° се добавя към въртенето на иглата в горния код, тъй като изображението, което използвах, е на изправена игла и първоначално трябваше да го завъртя на 270 °, за да го накарам да лежи плоско вляво.

Най-накрая се свързах range_change_event () функцията към плъзгача на обхвата, така че измервателният уред може да работи с него.

Разгледайте демонстрация или погледнете изходния код на нашия Github хранилище.