Як зробити анімований спідометр SVG

A вимірювальний прилад є інструментом, який візуально вказує значення в межах даного діапазону. У комп'ютерах a “індикатор дискового простору” використовує вимірювальний прилад, щоб показати, скільки місця на диску використовується від загальної кількості доступних. Датчики мають зони або області по всьому діапазону, кожен з яких відрізняється своїм кольором. У розробці front-end ми можемо використовувати Тег HTML5 для відображення даних у певному діапазоні.

У цій публікації ми зробимо Вимірник SVG напівкруглої форми, і анімувати його. Погляньте на цей попередній перегляд GIF як буде працювати остаточна версія Firefox:

Лічильник діапазон 0-100, і відображається три рівні зони в жовтий, синій і червоний. Ви можете змінити діапазон і кількість зон відповідно до ваших потреб.

З метою пояснення, я виконуватиму ручні розрахунки і використовувати атрибути / властивості вбудованих SVG на наступних етапах.

Моя остаточна демонстрація, однак, використовує CSS і JavaScript для розрахунку і вставки властивостей SVG, щоб зробити його більш гнучким.

1. Намалюйте коло

Давайте намалюємо простий круг у SVG. Новий HTML5 tag дозволяє нам додавати SVG прямо в HTML код. Всередині ми додаємо Форму SVG, наприклад:

У CSS додамо ширина і висота властивості обгортки, як більші, так і рівні діаметру кола (це 300px у нашому прикладі). Також потрібно встановити ширину і висоту #meter елемент до 100%.

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

2. Додайте контур до кола і видаліть заливку

За допомогою інсульт і ширина обведення Властивості SVG додаємо контур до кола, а також за допомогою fill = "none" ми також видаляємо заповнення кола.

3. Накрийте лише половину кола

The обведення Властивість SVG створює штриховий контур і приймає два значення, довжина тире і довжина зазору.

Для напівкруглого контуру, довжина тире Значення повинно бути рівним напівколу окружності, так що тире покриває половину окружності кола, і довжина зазору значення повинно бути рівним або більшим за залишкову окружність.

Коли це буде більше, воно буде перетворено у залишкову окружність браузером, тому ми будемо використовувати повне значення окружності для довжина зазору. Таким чином можна уникнути обчислення залишкової окружності.

Давайте розглянемо розрахунки:

$\mathrm{окружності}=2А¢Â\; ??\pi \times r$

де r - радіус. Для радіуса 150 окружність:

$\begin{array}{}\mathrm{окружності}=2А¢Â\; ??\pi \times \mathrm{150}\\ \mathrm{окружності}=942.48\end{array}$

Якщо ми розділимо його на 2, отримаємо 471.24 для напівколу, так що значення обведення Властивість для напівколового контуру в 150 радіусі кола 471, 943. Цей півколо буде використовуватися для позначення зони низького діапазону лічильника.

Як ви бачите, це перевернуто, тому давайте повернемо SVG, додавши перетворення Властивість CSS зі значенням rotateX (180deg) до Елемент HTML.

 #meter transform: rotateX (180deg); 

4. Додайте інші зони

The середня зона (блакитний) повинен покривати частину півколу, а ⅔ 471 - 314. Отже, додамо ще одне коло до нашого SVG, використовуючи обведення Власність знову, але тепер зі значенням 314, 943.

  < /circle>  

The кінцева зона (червоний) має охоплювати останню частину півкола, а 47 471 - 157, тому ми додамо це значення до обведення властивість третього кола.

5. Додати контур лічильника

Додамо сірий контур до лічильника, щоб він виглядав краще. The довжина тире кола контуру повинна бути рівною напівколу. Ми розміщуємо його перед усіма іншими колами в коді, так що це буде перший за допомогою браузера, і тому буде відображається під колами регіонів на екрані.

The ширина обведення Властивість повинна бути трохи більшою, ніж у інших колах, для того, щоб дати вигляд реального контуру.

     < /circle>      

Контур закінчується

Оскільки контур не охоплює кінці півколу, ми також додаємо до кінців 2 рядки довжиною приблизно 2px, додаючи ще одне коло довжина тире 2px і a довжина зазору напівкольорової мінус 2px. Тому значення обведення властивість цього кола є 2, 469.

Маска

Тепер давайте додамо ще одне коло після низьких, середніх і високих зон. Нове коло буде функціонувати як маска для приховування непотрібних зон, коли буде працювати вимірювальний прилад.

Його властивості будуть такими ж, як і у контурі кола, а колір обведення буде також сірий. Пізніше маску буде змінено за допомогою Javascript, щоб показати зони під ним у відповідь на вхідний слайдер.

Комбінований код досі є таким, як показано нижче.

Якщо ми хочемо розкрити область під маскою, нам потрібно зменшити розмір маски довжина тире. Наприклад, при значенні обведення властивість маски кола 157, 943, дуги будуть стояти в наступному стані:

Отже, все, що нам потрібно зробити зараз, це налаштування обведення маски за допомогою JavaScript для анімації. Але перш ніж ми це зробимо, як я вже згадував раніше, для мого остаточного демо я використовував CSS і JavaScript для розрахунку і додавання більшості властивостей SVG.

Нижче наведено код HTML, CSS та JavaScript, який призводить до того ж результату, що й вище.

HTML

Я додав зображення голки (gauge-needle.svg), повзунок діапазону (# повзунок #) на вхід користувача та мітку (label # lbl) для відображення значення повзунка в діапазоні 0-100.

    0 
 

CSS

Наведений нижче код CSS додає до SVG правила стилю, оскільки форми SVG можуть бути стилізовані так само, як і елементи HTML. Якщо ви хочете дізнатися більше про те, як створити SVG за допомогою CSS, подивіться на цей пост. Для оформлення повзунка перевірте цю публікацію.

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

JavaScript

У JavaScript спочатку обчислюємо і встановлюємо розміри оболонки і всі дуги, потім додаємо відповідні обведення значення для кіл. Після цього ми будемо прив'язувати користувальницьку подію до повзунка діапазону, щоб виконати анімацію.

 / * Встановити радіус для всіх кіл * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; для (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, перетворює його в еквівалент напівколуми (value_value) значення між 471-0 (471 - півколо радіуса 150) і встановлює це value_value як довжина тире маски обведення власності.

The range_change_event () Користувальницька функція також обертає голку після перетворення користувальницького входу (в діапазоні 0-100) до ступеня, еквівалентного 0-180.

270 ° додається до повороту голки в наведеному вище коді, тому що зображення, яке я використовував, має вертикальну голку, і я повинен був спочатку повернути його на 270 °, щоб він лежав на лівому краю.

Нарешті, я прив'язав range_change_event () функцію до повзунка діапазону, так що датчик може працювати з ним.

Перевірте demo або ознайомтеся з вихідним кодом нашого сайту Репозитарій Github.