Как создать анимацию измерителя SVG
Манометр – это инструмент, который визуально показывает значение в заданном диапазоне. В компьютерах «индикатор дискового пространства» использует измеритель, чтобы показать, сколько дискового пространства используется из общего доступного. Датчики имеют зоны или области по всему диапазону, каждая из которых отличается своим цветом. В разработке внешнего интерфейса мы можем использовать
В этом посте мы сделаем измеритель SVG полукруглой формы и анимируем его. Посмотрите на этот превью GIF, который показывает, как будет работать финальная версия в Firefox:
Диапазон измерения составляет 0-100, и он отображает три равные зоны: желтый, синий и красный. Вы можете изменить диапазон и количество зон в соответствии с вашими потребностями.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
В целях пояснения я буду выполнять ручные вычисления и использовать встроенные атрибуты / свойства SVG в следующих шагах.
Моя последняя демонстрация, однако, использует CSS и JavaScript для вычисления и вставки свойств SVG, чтобы сделать его более гибким.
1. Нарисуй круг
Давайте нарисуем простой круг в SVG. HTML5 новый тег позволяет нам добавлять SVG прямо в код HTML. Внутри
В CSS добавим свойства обертки ширины и высоты, которые больше или равны диаметру круга (в нашем примере это 300px). Нам также нужно установить ширину и высоту элемента #meter равными 100%.
#wrapper {
ширина: 400 пикселей;
высота: 400 пикселей;
}
#meter {
ширина: 100%;
высота: 100%;
}
2. Добавить контур к кругу и удалить заливку
С помощью ход и ширина хода В свойствах SVG мы добавляем контур к кругу и, используя свойство fill = “none”, удаляем также заливку круга.
3. покрыть только половину круга
штрих-dasharray Свойство SVG создает пунктирный контур и принимает два значения: длину тире и длину зазора.
Для контура полукруга значение длины черты должно быть равно половине окружности круга, так что черта покрывает половину окружности круга, а значение длины зазора должно быть равно или больше, чем оставшаяся окружность.
Когда оно больше, оно будет преобразовано браузером в оставшуюся окружность, поэтому мы будем использовать значение полной окружности для длины зазора. Таким образом, мы можем избежать расчета оставшейся окружности.
Давайте посмотрим на расчеты:
Окружность = 2Ãà ¢  € »π × г
где r – радиус. Для радиуса 150 длина окружности:
Окружность = 2Ãà ¢  € »π × 150circumference = 942,48
Если мы разделим его на 2, мы получим 471,24 для полуокружности, поэтому значение свойства stroke-dasharray для контура полукруга в круге с радиусом 150 равно 471, 943. Этот полукруг будет использоваться для обозначения минимума Зона действия метра.
Как вы можете видеть, это вверх ногами, поэтому давайте поднимем SVG, добавив преобразование Свойство CSS со значением rotateX (180deg) для
#meter {
преобразование: rotateX (180 градусов);
}
4. Добавьте другие зоны
Средняя зона (синяя) должна покрывать ⅔ часть полукруга, а ⅔ из 471 равно 314. Итак, давайте добавим еще один круг в наш SVG, снова используя свойство stroke-dasharray, но теперь со значением 314 943.
Последняя зона (красная) должна охватывать последнюю ⅓ часть полукруга, а ⅓ из 471 равно 157, поэтому мы добавим это значение к свойству stroke-dasharray третьего круга.
5. Добавить схему метра
Давайте добавим серый контур к измерителю, чтобы он выглядел лучше. Длина штрихов контура круга должна быть равна половине окружности. Мы помещаем его перед всеми остальными кругами в коде, чтобы он сначала отображался браузером и, следовательно, отображался под кружками регионов на экране.
Свойство ширины обводки должно быть немного больше, чем у других окружностей, чтобы создать реальный контур.
Поскольку контур не охватывает концы полукруга, мы также добавляем 2 линии по 2 пикселя к концам, добавляя еще один круг с длиной штрихов 2 пикселя и длиной зазора полуокружности минус 2 пикселя. Следовательно, значение свойства stroke-dasharray этого круга равно 2 469.
Теперь давайте добавим еще один круг после зон низкого, среднего и высокого диапазона. Новый круг будет функционировать как маска, чтобы скрыть ненужные зоны, когда будет работать измеритель.
Его свойства будут такими же, как у контура, а цвет обводки также будет серым. Позже маска будет изменена с помощью Javascript, чтобы показать зоны под ней в ответ на ползунок ввода.
Объединенный код до сих пор, как показано ниже.
Если мы хотим показать область под маской, нам нужно уменьшить размер штрихов маски. Например, когда значение свойства stroke-dasharray круга маски равно 157, 943, дуги будут находиться в следующем состоянии:
Итак, все, что нам нужно сделать сейчас, это настроить штрих-маску маски, используя JavaScript для анимации. Но прежде чем мы это сделаем, как я уже упоминал ранее, в своей последней демонстрации я использовал CSS и JavaScript для вычисления и добавления большинства свойств SVG.
Ниже вы можете найти код HTML, CSS и JavaScript, который приводит к тому же результату, что и выше. HTML Я добавил изображение иглы (gauge-needle.svg), ползунок диапазона (input # slider) к пользовательскому вводу и метку (label # lbl) для отображения значения ползунка в диапазоне 0-100.
CSS
Приведенный ниже код CSS добавляет правила стиля в SVG, поскольку формы SVG можно стилизовать так же, как элементы HTML. Если вы хотите узнать больше о том, как стилизовать SVG с помощью CSS, посмотрите этот пост. Для стилизации слайдера, проверьте этот пост.
#wrapper {
положение: относительное;
наценка: авто;
}
#meter {
ширина: 100%; высота: 100%;
преобразование: rotateX (180 градусов);
}
.circle {
заполнить: нет;
}
.outline, #mask {
ход: # F1F1F1;
ширина хода: 65;
}
.спектр {
ширина хода: 60;
}
#slider, #lbl {
положение: абсолютное;
}
#slider {
курсор: указатель;
слева: 0;
наценка: авто;
справа: 0;
верх: 58%;
ширина: 94%;
}
#lbl {
цвет фона: # 4B4C51;
радиус границы: 2 пикселя;
белый цвет;
семья шрифтов: «новый курьер»;
размер шрифта: 15pt;
вес шрифта: полужирный;
обивка: 4px 4px 2px 4px;
справа: -48px;
верх: 57%;
}
#meter_needle {
высота: 40%;
слева: 0;
наценка: авто;
положение: абсолютное;
справа: 0;
Топ 10%;
источник трансформации: нижний центр;
/ * Исправление ориентации * /
преобразование: вращение (270 градусов);
}
JavaScript
В JavaScript сначала мы вычисляем и устанавливаем размеры обертки и всех дуг, затем добавляем соответствующие значения stroke-dasharray в круги. После этого мы будем привязывать пользовательское событие к ползунку диапазона для выполнения анимации.
/ * Установить радиус для всех кругов * /
var r = 250;
var circle = document.querySelectorAll (‘. circle’);
var total_circles = circle.length;
для (var i = 0; i <total_circles; i ++) {
круги[i].setAttribute (‘r’, r);
}
/ * Установить размер обертки счетчика * /
var meter_dimension = (r * 2) + 100;
var wrapper = document.querySelector (“# wrapper”);
wrapper.style.width = meter_dimension + “px”;
wrapper.style.height = meter_dimension + “px”;
/ * Добавить штрихи в круги * /
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 ( “# низкий”)
.setAttribute (“stroke-dasharray”, semi_cf + “,” + cf);
document.querySelector ( “# ср”)
.setAttribute (“stroke-dasharray”, semi_cf_2by3 + “,” + cf);
document.querySelector ( “# высоких”)
.setAttribute (“stroke-dasharray”, semi_cf_1by3 + “,” + cf);
document.querySelector ( “#”) outline_ends
.setAttribute (“stroke-dasharray”, 2+ “,” + (semi_cf – 2));
document.querySelector ( “# маска”)
.setAttribute (“stroke-dasharray”, semi_cf + “,” + cf);
/ * Событие слайдера диапазона привязки * /
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 процент = слайд.значение;
var meter_value = semi_cf – ((процент * semi_cf) / 100);
mask.setAttribute (“stroke-dasharray”, meter_value + “,” + cf);
meter_needle.style.transform = “rotate (” +
(270 + ((процентов * 180) / 100)) + “град)”;
lbl.textContent = процентов + “%”;
}
slider.addEventListener (“input”, range_change_event);
Пользовательская функция range_change_event ()
Поведение индикатора выполняется пользовательской функцией range_change_event (), которая отвечает за настройку размера маски и анимацию иглы.
Он принимает значение ползунка (пользовательский ввод), которое находится в диапазоне от 0 до 100, преобразует его в эквивалент полуокружности (meter_value) значения в диапазоне от 471 до 0 (471 – это полуокружность для радиуса 150), и устанавливает это значение meter_value как длина черты свойства mask-dasharray.
Пользовательская функция range_change_event () также вращает стрелку после преобразования пользовательского ввода (входящего в диапазон 0-100) в его эквивалент степени 0-180.
270 ° добавляется к повороту иглы в приведенном выше коде, потому что изображение, которое я использовал, представляет собой вертикальную иглу, и мне пришлось сначала повернуть ее на 270 °, чтобы она лежала горизонтально слева от нее.
Наконец, я связал функцию range_change_event () с ползунком диапазона, чтобы с ним можно было работать с измерителем.
Проверьте демонстрация или посмотрите на исходный код на нашем Github хранилище,
Подробнее: Нажмите здесь, чтобы проверить больше анимации SVG
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
