Bagaimana Membuat Kelajuan SVG Berwayar Animasi

A meter pengukur adalah alat yang menunjukkan secara visual nilai dalam julat yang diberikan. Dalam komputer, a “penunjuk ruang cakera” menggunakan meter tolok untuk menunjukkan berapa ruang cakera digunakan daripada jumlah yang tersedia. Tolok mempunyai zon atau wilayah di seluruh julatnya, masing-masing dibezakan dengan warna sendiri. Di hadapan pembangunan, kita boleh menggunakannya Tag HTML5 untuk memaparkan data dalam julat tertentu.

Dalam siaran ini, kami akan membuat SVG mengukur meter bentuk separa bulat, dan menghidupkannya. Lihatlah GIF pratonton ini yang ditunjukkan bagaimana versi akhir akan berfungsi di Firefox:

Meter itu julat ialah 0-100, dan ia memaparkan tiga zon yang sama dalam kuning, biru dan merah. Anda boleh menukar julat dan bilangan zon mengikut keperluan anda.

Untuk tujuan penerangan, saya akan melakukan pengiraan manual, dan menggunakan ciri / sifat SVG sebaris dalam langkah-langkah berikut.

Demo terakhir saya, bagaimanapun, menggunakan CSS dan JavaScript untuk pengiraan dan penyisipan sifat SVG untuk menjadikannya lebih fleksibel.

1. Lukis bulatan

Mari kita buat bulatan mudah dalam SVG. Baru HTML5 tag membolehkan kami menambah SVG ke dalam kod HTML. Di dalam tag, kami tambahkan Bentuk SVG seperti ini:

Dalam CSS, mari tambahkan lebar dan ketinggian sifat untuk pembalut, kedua-duanya lebih besar daripada atau sama dengan diameter lingkaran (ia 300px dalam contoh kita). Kita juga perlu menetapkan lebar dan ketinggian #meter elemen hingga 100%.

 #wrapper lebar: 400px; ketinggian: 400px;  #meter width: 100%; ketinggian: 100%; 

2. Tambah garis besar kepada bulatan dan keluarkan isi

Dengan bantuan strok dan lebar strok Ciri SVG kami menambah garis besar kepada bulatan, dan dengan menggunakan isi = "tiada" harta yang kita keluarkan mengisi bulatan juga.

3. hanya meliputi setengah bulatan

The stroke-dasharray Hartanah SVG mewujudkan garis besar putus-putus, dan mengambil dua nilai, panjang lebar dan panjang jurang.

Untuk garis pusat separa bulatan, yang panjang lebar keperluan nilai bersamaan dengan separa lilitan bulatan, supaya sengkang meliputi separuh lilitan bulatan, dan panjang jurang keperluan nilai sama ada dengan atau lebih daripada lilitan yang tinggal.

Apabila lebih, ia akan ditukar ke lilitan yang tinggal oleh penyemak imbas, oleh itu kami akan menggunakan nilai lilitan penuh untuk panjang jurang. Dengan cara ini kita boleh mengelak daripada mengira lilitan yang selebihnya.

Mari kita lihat pengiraan:

$\mathrm{lilitan}=2Ã\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi \times r$

di mana r adalah jejari. Untuk radius 150, lilitan adalah:

$\begin{array}{}\mathrm{lilitan}=2Ã\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi \times \mathrm{150}\\ \mathrm{lilitan}=942.48\end{array}$

Sekiranya kita membahagikannya dengan 2, kita mendapat 471.24 untuk separa lilitan, jadi nilai stroke-dasharray harta untuk garis separa bulatan dalam bulatan radius 150 adalah 471, 943. Separuh bulatan ini akan digunakan untuk menandakan Zon Jarak Rendah meter.

Seperti mana yang dapat anda lihat, ia terbalik, jadi mari kita ubah SVG dengan menambah ubah Hartanah CSS dengan nilai rotateX (180 darjah) kepada Elemen HTML.

 #meter transform: rotateX (180deg); 

4. Tambah zon lain

The zon tengah (biru) perlu meliputi bahagian separuh bulatan, dan ⅔ 471 adalah 314. Jadi, mari tambah satu lagi bulatan ke SVG kami dengan menggunakan stroke-dasharray harta lagi, tetapi sekarang dengan nilai 314, 943.

  < /circle>  

The zon terakhir (merah) perlu meliputi bahagian akhir ⅓ terakhir separa bulatan, dan ⅓ daripada 471 ialah 157, jadi kami akan menambah nilai ini kepada stroke-dasharray harta pusingan ketiga.

5. Tambah Garis Besar Meter

Mari kita tambah garis kelabu untuk meter supaya dapat kelihatan lebih baik. The panjang lebar lingkaran garis besar perlu sama dengan separa lilitan. Kami letakkannya sebelum semua kalangan lain dalam kod tersebut, supaya ia menjadi diberikan pertama oleh penyemak imbas, dan oleh itu akan menjadi dipaparkan di bawah kalangan wilayah pada skrin.

The lebar strok harta perlu menjadi sedikit lebih besar daripada kalangan lain, untuk memberikan penampilan garis besar yang nyata.

     < /circle>      

Garis Besar Berakhir

Oleh kerana garisan tidak meliputi hujung separa bulatan, kami juga menambah 2 baris kira-kira 2px ke hujung dengan menambah satu lagi bulatan dengan panjang lebar daripada 2px dan a panjang jurang dari separa lilitan tolak 2px. Oleh itu, nilai stroke-dasharray harta pusingan ini 2, 469.

Topeng

Sekarang mari tambahkan satu lagi lingkaran selepas zon jarak rendah, purata, dan tinggi. Lingkaran baru akan berfungsi sebagai topeng untuk menyembunyikan kawasan zon yang tidak perlu apabila meter tolok akan dikendalikan.

Sifatnya akan sama seperti lingkaran garis besar, dan warna stroknya juga akan menjadi kelabu. Topeng kemudian akan diubah saiznya dengan Javascript untuk mendedahkan zon di bawahnya sebagai tindak balas kepada slider input.

Kod gabungan setakat ini adalah seperti di bawah.

Sekiranya kita ingin mendedahkan rantau di bawah topeng, kita perlu mengurangkan saiz masker itu panjang lebar. Sebagai contoh, apabila nilai stroke-dasharray harta lingkaran topeng adalah 157, 943, busur akan berdiri di negeri berikut:

Jadi, semua yang perlu kita lakukan sekarang adalah untuk melaraskan stroke-dasharray topeng menggunakan JavaScript untuk animasi. Tetapi sebelum kita berbuat demikian, seperti yang saya nyatakan sebelum ini, untuk demo terakhir saya, saya menggunakan CSS dan JavaScript untuk mengira dan menambah kebanyakan sifat SVG.

Di bawah anda boleh mencari kod HTML, CSS, dan JavaScript yang membawa kepada hasil yang sama seperti di atas.

HTML

Saya menambah imej jarum (gauge-needle.svg), pelbagai gelangsar (input # slider) kepada input pengguna dan label (label # lbl) untuk memaparkan nilai gelangsar dalam lingkungan 0-100.

    0 
 

CSS

Kod CSS di bawah ini menambah peraturan gaya ke SVG, kerana bentuk SVG boleh ditata dengan cara yang sama seperti unsur HTML. Sekiranya anda ingin membaca lebih lanjut tentang bagaimana cara menstabilkan SVG dengan CSS, lihat pada siaran ini. Untuk menggayakan slider, lihat siaran ini.

 #wrapper kedudukan: relatif; margin: auto;  #meter width: 100%; ketinggian: 100%; mengubah: rotateX (180 deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; stroke-width: 65;  .range stroke-width: 60;  #slider, #lbl position: absolute;  #slider kursor: penunjuk; kiri: 0; margin: auto; betul: 0; atas: 58%; lebar: 94%;  #lbl background-color: # 4B4C51; jejari sempadan: 2px; warna: putih; font-family: 'kurier baru'; saiz fon: 15pt; font-weight: bold; padding: 4px 4px 2px 4px; kanan: -48px; atas: 57%;  #meter_needle ketinggian: 40%; kiri: 0; margin: auto; kedudukan: mutlak; betul: 0; 10 teratas%; transform-origin: bottom center; / * orientation fix * / transform: putar (270deg); 

JavaScript

Dalam JavaScript, kita mula-mula mengira dan menetapkan dimensi bungkus dan semua lengkungan, maka kita menambah sesuai stroke-dasharray nilai kepada kalangan. Selepas itu, kami akan mengikat acara tersuai kepada slider jarak untuk melakukan animasi.

 / * Tetapkan jejari untuk semua kalangan * / var r = 250; var bulatan = document.querySelectorAll ('bulatan'); var total_circles = circles.length; untuk (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); 

The Custom range_change_event () Fungsi

Tingkah laku meter dilakukan oleh range_change_event () fungsi tersuai yang bertanggungjawab untuk pelarasan saiz topeng dan animasi jarum.

Ia mengambil nilai slider (input pengguna) yang antara 0-100, menukarnya kepada setara separa lilitan (meter_value) daripada nilai antara 471-0 (471 ialah separuh lilitan untuk jejari 150), dan set itu meter_value sebagai panjang lebar daripada topeng stroke-dasharray harta.

The range_change_event () Fungsi tersuai juga berputar jarum selepas menukar input pengguna (datang dalam kisaran 0-100) kepada setara bersamaan 0-180.

270 ° ditambah kepada putaran jarum dalam kod di atas kerana imej yang saya gunakan adalah jarum tegak dan saya terpaksa memusingkannya pada 270 ° untuk menjadikannya rata di sebelah kiri.

Akhirnya, saya terikat range_change_event () berfungsi pada slider jarak, supaya meter tolok boleh dikendalikan dengannya.

Semak demo atau lihat kod sumber pada kami Repositori Github.