Cara Membuat Speedometer SVG Animasi

SEBUAH pengukur meteran adalah alat yang secara visual menunjukkan nilai dalam rentang yang diberikan. Di komputer, a “indikator ruang disk” menggunakan meteran pengukur untuk menunjukkan berapa banyak ruang disk yang digunakan dari total yang tersedia. Pengukur memiliki zona atau wilayah di rentangnya, masing-masing dibedakan berdasarkan warnanya sendiri. Dalam pengembangan front-end, kita bisa menggunakan Tag HTML5 untuk menampilkan data dalam rentang tertentu.

Di pos ini, kami akan membuat Meteran ukur SVG berbentuk setengah lingkaran, dan menghidupkannya. Lihatlah pratinjau GIF yang ditampilkan bagaimana versi final akan bekerja di Firefox:

Meteran kisaran 0-100, dan itu akan ditampilkan tiga zona sama dalam warna kuning, biru dan merah. Anda dapat mengubah rentang dan jumlah zona sesuai dengan kebutuhan Anda.

Untuk tujuan penjelasan, saya akan melakukan perhitungan manual, dan menggunakan inline atribut / properti SVG pada langkah-langkah berikut.

Demo terakhir saya, bagaimanapun, menggunakan CSS dan JavaScript untuk perhitungan dan penyisipan properti SVG agar lebih fleksibel.

1. Gambar sebuah lingkaran

Mari kita menggambar lingkaran sederhana di SVG. HTML5 baru Tag memungkinkan kita untuk menambahkan SVG langsung ke kode HTML. Di dalam tag, kami menambahkan Bentuk SVG seperti ini:

Dalam CSS, mari kita tambahkan lebar dan tinggi properti ke pembungkus, baik lebih besar dari atau sama dengan diameter lingkaran (300px dalam contoh kita). Kita juga perlu mengatur lebar dan tinggi #meter elemen hingga 100%.

 #wrapper width: 400px; tinggi: 400px;  #meter width: 100%; tinggi: 100%;

2. Tambahkan garis besar ke lingkaran dan hapus isian

Dengan bantuan pukulan dan lebar langkah Properti SVG kami menambahkan garis besar ke lingkaran, dan dengan menggunakan isi = "tidak ada" properti kami menghapus isi lingkaran juga.

3. tutupi hanya setengah lingkaran

Itu stroke-dasharray Properti SVG membuat garis putus-putus, dan mengambil dua nilai, panjang putus-putus dan panjang celah.

Untuk garis setengah lingkaran, tanda panjang putus-putus nilai harus sama dengan semi-keliling lingkaran, sehingga tanda hubung mencakup setengah dari keliling lingkaran, dan panjang celah nilai kebutuhan harus sama dengan atau lebih dari keliling yang tersisa.

Ketika lebih, itu akan dikonversi ke keliling yang tersisa oleh browser, maka kita akan menggunakan nilai keliling penuh untuk panjang celah. Dengan cara ini kita dapat menghindari penghitungan keliling yang tersisa.

Mari kita lihat perhitungannya:

$lingkar = 2 Ã ?? Â ?? Ã¢A A?? π \times r$

dimana r adalah jari-jarinya. Untuk radius 150, kelilingnya adalah:

$\begin{matrix} lingkar = 2 Ã ?? Â ?? Ã¢A A?? π \times 150 \\ lingkar = 942.48 \end{matrix}$

Jika kita membaginya dengan 2, kita mendapatkan 471,24 untuk semi-keliling, jadi nilai dari stroke-dasharray properti untuk garis besar setengah lingkaran dalam lingkaran 150 jari adalah 471, 943. Setengah lingkaran ini akan digunakan untuk menunjukkan Zona Jangkauan Rendah meter.

Seperti yang Anda lihat, ini terbalik, jadi mari kita naikkan SVG dengan menambahkan mengubah Properti CSS dengan nilai rotateX (180deg) ke Elemen HTML.

 #meter transform: rotateX (180deg);

4. Tambahkan zona lain

Itu zona tengah (biru) harus menutupi ⅔ bagian dari setengah lingkaran, dan ⅔ dari 471 adalah 314. Jadi, mari kita tambahkan lingkaran lain ke SVG kami dengan menggunakan stroke-dasharray properti lagi, tapi sekarang dengan nilai 314, 943.

  < /circle>

Itu zona akhir (merah) harus mencakup ⅓ bagian terakhir dari setengah lingkaran, dan ⅓ dari 471 adalah 157, jadi kami akan menambahkan nilai ini ke stroke-dasharray milik lingkaran ketiga.

5. Tambahkan Garis Besar Meteran

Mari tambahkan garis abu-abu ke meteran agar terlihat lebih baik. Itu panjang putus-putus dari lingkaran garis harus sama dengan semi-keliling. Kami menempatkannya di depan semua lingkaran lain dalam kode, sehingga akan menjadi demikian dirender terlebih dahulu oleh browser, dan karena itu akan terjadi ditampilkan di bawah lingkaran wilayah di layar.

Itu lebar langkah properti harus sedikit lebih besar daripada lingkaran lain, untuk memberikan tampilan garis besar yang nyata.

     < /circle>

Garis Besar Berakhir

Karena garis tidak menutupi ujung setengah lingkaran, kami juga menambahkan 2 baris sekitar 2px ke ujungnya dengan menambahkan lingkaran lain dengan panjang putus-putus dari 2px dan a panjang celah dari semi-circumference minus 2px. Oleh karena itu nilai stroke-dasharray milik lingkaran ini adalah 2, 469.

Topeng

Sekarang mari kita tambahkan lingkaran lain setelah zona rentang rendah, rata-rata, dan tinggi. Lingkaran baru akan berfungsi sebagai topeng untuk menyembunyikan wilayah zona yang tidak perlu saat meteran pengukur dioperasikan.

Sifat-sifatnya akan sama dengan yang ada pada lingkaran garis besar, dan warna goresannya juga akan abu-abu. Mask nantinya akan diubah ukurannya dengan Javascript untuk mengungkapkan zona di bawahnya sebagai respons terhadap slider input.

Kode gabungan sejauh ini adalah seperti di bawah ini.

Jika kita ingin mengungkapkan suatu daerah di bawah topeng, kita perlu mengurangi ukuran topeng itu panjang putus-putus. Misalnya, ketika nilai stroke-dasharray milik lingkaran topeng adalah 157, 943, busur akan berdiri dalam keadaan berikut:

Jadi, yang harus kita lakukan sekarang adalah menyesuaikan stroke-dasharray topeng menggunakan JavaScript untuk animasi. Tetapi sebelum kita melakukan itu, seperti yang saya sebutkan sebelumnya, untuk demo terakhir saya, saya menggunakan CSS dan JavaScript untuk menghitung dan menambahkan sebagian besar properti SVG.

Di bawah ini Anda dapat menemukan kode HTML, CSS, dan JavaScript yang mengarah ke hasil yang sama seperti di atas.

HTML

Saya menambahkan gambar jarum (gauge-needle.svg), penggeser jarak (masukan # slider) ke input pengguna, dan label (label # lbl) untuk menampilkan nilai slider di kisaran 0-100.

CSS

Kode CSS di bawah ini menambahkan aturan gaya ke SVG, karena bentuk SVG dapat ditata dengan cara yang sama dengan elemen HTML. Jika Anda ingin membaca lebih lanjut tentang cara gaya SVG dengan CSS, lihat posting ini. Untuk mengatur slider, lihat posting ini.

 #wrapper position: relative; margin: otomatis;  #meter width: 100%; tinggi: 100%; transform: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; lebar langkah: 65;  .range stroke-width: 60;  #slider, #lbl position: absolute;  #slider cursor: pointer; kiri: 0; margin: otomatis; kanan: 0; atas: 58%; lebar: 94%;  #lbl background-color: # 4B4C51; border-radius: 2px; warna putih; font-family: 'kurir baru'; ukuran font: 15pt; font-weight: bold; padding: 4px 4px 2px 4px; kanan: -48px; atas: 57%;  #meter_needle tinggi: 40%; kiri: 0; margin: otomatis; posisi: absolut; kanan: 0; 10 besar%; transform-origin: tengah bawah; / * memperbaiki orientasi * / mengubah: memutar (270deg);

JavaScript

Dalam JavaScript, pertama-tama kita menghitung dan mengatur dimensi pembungkus dan semua busur, lalu kita tambahkan yang sesuai stroke-dasharray nilai ke lingkaran. Setelah itu, kami akan mengikat acara khusus ke penggeser rentang untuk melakukan animasi.

 / * Atur radius untuk semua lingkaran * / var r = 250; var circle = document.querySelectorAll ('. circle'); var total_circles = circle.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);

Kebiasaan `range_change_event ()` Fungsi

Perilaku meter dilakukan oleh range_change_event () fungsi kustom yang bertanggung jawab untuk penyesuaian ukuran topeng dan animasi jarum.

Dibutuhkan nilai slider (input pengguna) yang antara 0-100, mengkonversikannya menjadi setara dengan setengah lingkaran (nilai meter_) dari nilai antara 471-0 (471 adalah semi-keliling untuk radius 150), dan menetapkan itu nilai meter_ sebagai panjang putus-putus topeng stroke-dasharray milik.

Itu range_change_event () fungsi kustom juga memutar jarum setelah mengubah input pengguna (datang dalam kisaran 0-100) ke tingkat yang setara dengan 0-180.

270 ° ditambahkan ke rotasi jarum pada kode di atas karena gambar yang saya gunakan adalah jarum tegak dan saya awalnya harus memutarnya 270 ° untuk membuatnya berbaring rata di sebelah kirinya.

Akhirnya, saya mengikat range_change_event () berfungsi untuk slider rentang, sehingga meteran pengukur dapat dioperasikan dengan itu.

Lihat demo atau lihat kode sumber di kami Repositori Github.