Како направити анимирани СВГ брзиномер

А гауге метер је алатка која визуелно указује на вредност унутар датог опсега. У компјутерима, а “индикатор простора на диску” користи мерач бројача да покаже колико простора на диску се користи од укупно доступног диска. Мерачи имају зоне или регионе у свом опсегу, од којих се свака разликује по својој боји. У фронт-енд развоју, можемо користити ХТМЛ5 ознака за приказ података унутар одређеног распона.

У овом посту, направићемо СВГ мерач полу-кружног облика, и анимирајте га. Погледајте овај ГИФ преглед који приказује како ће финална верзија радити у Фирефоку:

Метар опсег је 0-100, и приказује три једнаке зоне у жутој, плавој и црвеној. Можете да промените домет и број зона у складу са вашим потребама.

У сврху објашњења извршит ћу ручне израчуне и користити инлине СВГ атрибуте / својства у сљедећим корацима.

Мој завршни демо, међутим, користи ЦСС и ЈаваСцрипт за израчунавање и уметање СВГ својстава како би био флексибилнији.

1. Нацртајте круг

Хајде да нацртамо једноставан круг у СВГ-у. ХТМЛ5 је нови таг нам омогућава да додамо СВГ у ХТМЛ код. Унутар таг, додамо СВГ облик овако:

У ЦСС-у додајемо видтх и хеигхт својства за омотач, оба већа или једнака пречнику круга (то је 300пк у нашем примјеру). Такође морамо поставити ширину и висину #метар елемент до 100%.

 #враппер видтх: 400пк; хеигхт: 400пк;  #метер видтх: 100%; висина: 100%; 

2. Додајте контуру у круг и уклоните попуну

Уз помоћ удар и ширина хода СВГ својствима додајемо обрис у круг, и помоћу филл = "ноне" уклањамо и круг.

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

Тхе строке-дасхарраи Својство СВГ креира испрекидани обрис и узима две вредности, дасх ленгтх и гап ленгтх.

За полукружни обрис, дасх ленгтх вредност треба да буде једнака полукругу круга, тако да цртица покрива половину опсега круга, и гап ленгтх вредност треба бити једнака или већа од преосталог обима.

Када буде више, претраживач ће конвертовати у преостали обим, па ћемо користити пуну вредност опсега за гап ленгтх. На овај начин можемо избећи израчунавање преосталог обима.

Да видимо калкулације:

$\mathrm{опсег}=2А\; ??\; А\; ??\; А¢А\; ??\; А\; ??\pi \times р$

где р је радијус. За радијус од 150, обим је:

$\begin{array}{}\mathrm{опсег}=2А\; ??\; А\; ??\; А¢А\; ??\; А\; ??\pi \times \mathrm{150}\\ \mathrm{опсег}=942.48\end{array}$

Ако га поделимо на 2, добијамо 471.24 за полу-обод, тако да вредност строке-дасхарраи својство за полукружни обрис у кругу радијуса 150 471, 943. Овај полукруг ће се користити за означавање зоне ниског домета бројила.

Као што видите, наопако је наопако окренут СВГ тако што ћемо додати трансформисати ЦСС својство са вредношћу ротатеКс (180дег) до ХТМЛ елемент.

 #метер трансформ: ротатеКс (180дег); 

4. Додајте друге зоне

Тхе средња зона (плава) мора покрити оф дио полукруга, а 47 од 471 је 314. Дакле, хајде да додамо још један круг нашем СВГ-у користећи строке-дасхарраи поново, али сада са вредношћу 314, 943. \ т.

  < /circle>  

Тхе финал зоне (црвено) мора покрити последњи ⅓ део полукруга, а 47 од 471 је 157, тако да ћемо додати ову вредност строке-дасхарраи својство трећег круга.

5. Додајте скицу метра

Додајте сиви обрис на мерач како би изгледао боље. Тхе дасх ленгтх круга обриса треба да буде једнак полу-опсегу. Стављамо је испред свих других кругова у коду, тако да ће бити прво приказано у прегледачу, и стога ће бити приказани испод кругова региона на екрану.

Тхе ширина хода власништво треба да буде мало веће од онога у другим круговима, како би се створио изглед правог контуре.

     < /circle>      

Оутлине Ендс

Пошто контура не покрива крајеве полукруга, додајемо 2 реда од око 2 пиксела на крај додавањем другог круга са дасх ленгтх од 2пк и а гап ленгтх полу-обима минус 2пк. Дакле, вредност строке-дасхарраи власништво овог круга је 2, 469.

Маска

Сада ћемо додати још један круг иза зона ниског, просјечног и високог домета. Нови круг ће функционисати као маска за сакривање непотребних зонских региона када ће мерач мерила бити коришћен.

Његова својства ће бити иста као и она у кругу обриса, а боја ударца ће такође бити сива. Маска ће касније бити промењена помоћу Јавасцрипт-а да би се откриле зоне испод ње као одговор на улазни клизач.

Комбиновани код до сада је као испод.

Ако желимо да откријемо регион испод маске, морамо смањити величину маске дасх ленгтх. На пример, када је вредност строке-дасхарраи својство круга маски је 157, 943, лукови ће стајати у следећем стању:

Дакле, све што треба да урадимо је да прилагодимо строке-дасхарраи маске користећи ЈаваСцрипт за анимацију. Али пре него што то урадимо, као што сам већ поменуо, за мој последњи демо користио сам ЦСС и ЈаваСцрипт да израчунам и додам већину СВГ својстава.

У наставку можете пронаћи ХТМЛ, ЦСС и ЈаваСцрипт код који води до истог резултата као горе.

ХТМЛ

Додао сам слику иглом (гауге-неедле.свг), клизач опсега (улазни слајдер) на кориснички унос и ознаку (лабел # лбл) за приказ вредности клизача у опсегу 0-100.

    0 
 

ЦСС

ЦСС код испод додаје правила стила СВГ-у, јер се СВГ облици могу стилизирати на исти начин као и ХТМЛ елементи. Ако желите да прочитате више о томе како да креирате СВГ помоћу ЦСС-а, погледајте овај пост. За обликовање клизача погледајте овај пост.

 #враппер поситион: релативе; маргин: ауто;  #метер видтх: 100%; висина: 100%; трансформ: ротатеКс (180дег);  .цирцле филл: ноне;  .оутлине, #маск строке: # Ф1Ф1Ф1; ширина хода: 65;  .ранге ширина удара: 60;  #слидер, #лбл поситион: абсолуте;  #слидер курсор: показивач; лево: 0; маргин: ауто; десно: 0; врх: 58%; ширина: 94%;  #лбл бацкгроунд-цолор: # 4Б4Ц51; бордер-радиус: 2пк; бела боја; фамилија фонтова: 'цоуриер нев'; фонт-сизе: 15пт; фонт-веигхт: болд; паддинг: 4пк 4пк 2пк 4пк; десно: -48пк; врх: 57%;  #метер_неедле хеигхт: 40%; лево: 0; маргин: ауто; позиција: апсолутна; десно: 0; Топ 10%; трансформ-оригин: боттом центер; / * оријентација фик * / трансформ: ротирање (270дег); 

ЈаваСцрипт

У ЈаваСцрипту прво израчунамо и поставимо димензије омотача и свих лукова, а затим додамо одговарајуће строке-дасхарраи вредности у круговима. Након тога, ми ћемо обавезати прилагођени догађај на клизач опсега како бисмо извршили анимацију.

 / * Поставите радијус за све кругове * / вар р = 250; вар цирцлес = доцумент.куериСелецторАлл ('. цирцле'); вар тотал_цирцлес = кругови. за (вар и = 0; и < 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); 

Обичај ранге_цханге_евент () Фунцтион

Понашање мерача се врши од стране ранге_цханге_евент () прилагођена функција која је одговорна за подешавање величине маске и анимације игле.

Потребна је вредност клизача (кориснички унос) која је између 0-100, претвара га у еквивалент полу-обима (метер_валуе) вредности између 471-0 (471 је полуокруг за радијус 150), и то одређује метер_валуе као дасх ленгтх маске строке-дасхарраи својство.

Тхе ранге_цханге_евент () прилагођена функција такођер ротира иглу након претварања корисничког улаза (који долази у распону од 0 до 100) до еквивалентног ступња од 0-180.

270 ° се додаје ротацији игле у горе наведеном коду, јер слика коју сам користио је усправна игла и морала сам да је ротирам за 270 ° да би се налегла на лево.

Коначно, везао сам ранге_цханге_евент () функцију на клизач опсега, тако да се мерач мерења може користити са њим.

Проверите демо или погледајте изворни код на нашем Гитхуб репозиториј.