Как сделать анимированный спидометр SVG

измерительный прибор это инструмент, который визуально указывает значение в данном диапазоне. В компьютерах “индикатор дискового пространства” использует измеритель, чтобы показать, сколько дискового пространства используется из общего доступного. Датчики имеют зоны или области по всему диапазону, каждая из которых отличается своим цветом. В разработке внешнего интерфейса мы можем использовать HTML5-тег для отображения данных в определенном диапазоне.

В этом посте мы сделаем Измеритель СВГ полукруглой формы, и оживить это. Посмотрите на этот превью GIF, который показывает как будет работать финальная версия в Firefox:

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

В целях пояснения я буду выполнять ручные вычисления и использовать встроенные атрибуты / свойства SVG в следующих шагах..

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

1. Нарисуй круг

Давайте нарисуем простой круг в SVG. HTML5 новый тег позволяет нам добавлять SVG прямо в код HTML. Внутри тег, мы добавляем Форма SVG такова:

В CSS давайте добавим ширина а также рост свойства обёртки, которые больше или равны диаметру окружности (в нашем примере это 300px). Нам также нужно установить ширину и высоту #meter элемент до 100%.

 #wrapper width: 400px; высота: 400 пикселей;  #meter ширина: 100%; высота: 100%; 

2. Добавить контур к кругу и удалить заливку

С помощью Инсульт а также Ход ширина Свойства SVG мы добавляем контур к кругу, и с помощью Заправлять = «ни один» свойство мы удаляем заполнение круга, а также.

3. покрыть только половину круга

штрих-dasharray Свойство SVG создает пунктирный контур и принимает два значения, длина тире а также длина зазора.

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

Когда оно больше, оно будет преобразовано браузером в оставшуюся окружность, поэтому мы будем использовать значение полной окружности для длина зазора. Таким образом, мы можем избежать расчета оставшейся окружности.

Давайте посмотрим на расчеты:

$\mathrm{длина\; окружности}знак\; равно2Ã\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi \times р$

где р это радиус. Для радиуса 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. Добавьте другие зоны

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

  < /circle>  

последняя зона (красный) должен покрывать последнюю ⅓ часть полукруга, а ⅓ из 471 равно 157, поэтому мы добавим это значение к штрих-dasharray свойство третьего круга.

5. Добавьте схему метра

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

Ход ширина свойство должно быть немного больше, чем у других кругов, чтобы создать реальный контур.

     < /circle>      

Концы Конца

Поскольку контур не покрывает концы полукруга, мы также добавляем 2 линии по 2 пикселя к концам, добавляя еще один круг с длина тире 2px и длина зазора из полуокружности минус 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: относительный; наценка: авто;  #meter ширина: 100%; высота: 100%; преобразование: rotateX (180 градусов);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; ширина хода: 65;  .range штрих-ширина: 60;  #slider, #lbl position: absolute;  #slider курсор: указатель; слева: 0; наценка: авто; справа: 0; верх: 58%; ширина: 94%;  #lbl background-color: # 4B4C51; радиус границы: 2 пикселя; белый цвет; семья шрифтов: 'новый курьер'; размер шрифта: 15pt; вес шрифта: полужирный; обивка: 4px 4px 2px 4px; справа: -48px; верх: 57%;  #meter_needle height: 40%; слева: 0; наценка: авто; положение: абсолютное; справа: 0; Топ 10%; источник трансформации: нижний центр; / * фиксирование ориентации * / преобразование: поворот (270 градусов); 

JavaScript

В JavaScript сначала мы вычисляем и устанавливаем размеры обертки и всех дуг, затем добавляем соответствующие штрих-dasharray значения в кружки. После этого мы будем привязывать пользовательское событие к ползунку диапазона, чтобы выполнить анимацию.

 / * Установить радиус для всех окружностей * / var r = 250; var circle = document.querySelectorAll ('. circle'); var total_circles = circle.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, преобразует его в эквивалент полуокружности (meter_value) значения между 471-0 (471 - это полукруг для радиуса 150), и устанавливает, что meter_value как длина тире из маски штрих-dasharray имущество.

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

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

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

Проверьте демонстрация или посмотрите на исходный код на нашем Github хранилище.