Cách chế tạo đồng hồ tốc độ SVG hoạt hình

Một máy đo là một công cụ biểu thị trực quan một giá trị trong một phạm vi nhất định. Trong máy tính, một “chỉ báo không gian đĩa” sử dụng máy đo để hiển thị bao nhiêu dung lượng đĩa được sử dụng trong tổng số có sẵn. Đồng hồ đo có các vùng hoặc vùng trên phạm vi của nó, mỗi vùng được phân biệt bởi màu sắc riêng. Trong phát triển front-end, chúng ta có thể sử dụng Thẻ HTML5 để hiển thị dữ liệu trong một phạm vi cụ thể.

Trong bài đăng này, chúng tôi sẽ thực hiện một Đồng hồ đo SVG của hình bán nguyệt, và làm động nó Hãy xem GIF xem trước này cho thấy Phiên bản cuối cùng sẽ hoạt động như thế nào trong Firefox:

Máy đo phạm vi là 0-100, và nó hiển thị ba vùng bằng nhau màu vàng, màu xanh và màu đỏ. Bạn có thể thay đổi phạm vi và số lượng khu vực theo nhu cầu của bạn.

Đối với mục đích giải thích, tôi sẽ thực hiện các tính toán thủ công và sử dụng các thuộc tính / thuộc tính SVG nội tuyến trong các bước sau.

Tuy nhiên, bản demo cuối cùng của tôi sử dụng CSS và JavaScript để tính toán và chèn các thuộc tính SVG để làm cho nó linh hoạt hơn.

1. Vẽ một vòng tròn

Hãy vẽ một vòng tròn đơn giản trong SVG. HTML5 mới thẻ cho phép chúng tôi thêm SVG ngay vào mã HTML. Bên trong thẻ, chúng tôi thêm Hình dạng SVG như thế này:

Trong CSS, hãy thêm chiều rộng và Chiều cao thuộc tính cho trình bao bọc, cả hai đều lớn hơn hoặc bằng đường kính của vòng tròn (trong ví dụ của chúng tôi là 300px). Chúng ta cũng cần đặt chiều rộng và chiều cao của # mét yếu tố đến 100%.

 #wrapper chiều rộng: 400px; chiều cao: 400px;  #meter chiều rộng: 100%; chiều cao: 100%; 

2. Thêm phác thảo vào vòng tròn và xóa điền

Với sự giúp đỡ của Cú đánh và Chiều rộng đột quỵ Thuộc tính SVG, chúng tôi thêm một phác thảo vào vòng tròn và bằng cách sử dụng điền = "không" tài sản chúng tôi cũng loại bỏ điền vào vòng tròn.

3. chỉ che một nửa vòng tròn

Các đột quỵ Thuộc tính SVG tạo ra một phác thảo nét đứt và nhận hai giá trị, chiều dài dấu gạch ngang và chiều dài khoảng cách.

Đối với phác thảo bán tròn, chiều dài dấu gạch ngang giá trị cần bằng nửa chu vi của vòng tròn, sao cho dấu gạch ngang bao phủ một nửa chu vi của vòng tròn và chiều dài khoảng cách nhu cầu giá trị bằng hoặc hơn chu vi còn lại.

Khi nhiều hơn, nó sẽ được trình duyệt chuyển đổi sang chu vi còn lại, do đó chúng tôi sẽ sử dụng giá trị chu vi đầy đủ cho chiều dài khoảng cách. Bằng cách này, chúng ta có thể tránh tính toán chu vi còn lại.

Hãy xem các tính toán:

$\mathrm{chu\; vi}=\; =2Ã\; ??\; Â\; ??¢Â\; ??\pi \times r$

Ở đâu r là bán kính. Đối với bán kính 150, chu vi là:

$\begin{array}{}\mathrm{chu\; vi}=\; =2Ã\; ??\; Â\; ??¢Â\; ??\pi \times \mathrm{150}\\ \mathrm{chu\; vi}=\; =\mathrm{942,48,48}\end{array}$

Nếu chúng ta chia nó cho 2, chúng ta sẽ nhận được 471,24 cho bán chu vi, vì vậy giá trị của đột quỵ thuộc tính cho đường viền bán nguyệt trong vòng tròn bán kính 150 là 471, 943. Vòng tròn bán nguyệt này sẽ được sử dụng để biểu thị Vùng Phạm vi Thấp của đồng hồ.

Như bạn có thể thấy, nó lộn ngược, vì vậy hãy bật SVG lên bằng cách thêm biến đổi Thuộc tính CSS có giá trị là xoayX (180deg) để Phần tử HTML.

 #meter biến đổi: rotationX (180deg); 

4. Thêm các khu vực khác

Các khu trung (màu xanh) phải bao phủ ⅔ phần của nửa vòng tròn và của 471 là 314. Vì vậy, hãy thêm một vòng tròn khác vào SVG của chúng tôi bằng cách sử dụng đột quỵ tài sản một lần nữa, nhưng bây giờ với giá trị của 314, 943.

  < /circle>  

Các khu cuối cùng (màu đỏ) phải che ⅓ phần cuối của vòng tròn và của 471 là 157, vì vậy chúng tôi sẽ thêm giá trị này vào đột quỵ tài sản của vòng tròn thứ ba.

5. Thêm phác thảo đồng hồ

Chúng ta hãy thêm một đường viền màu xám vào đồng hồ để làm cho nó trông đẹp hơn. Các chiều dài dấu gạch ngang của vòng tròn phác thảo cần phải bằng nửa chu vi. Chúng tôi đặt nó trước tất cả các vòng tròn khác trong mã, vì vậy nó sẽ là được trình duyệt hiển thị đầu tiên, và do đó sẽ hiển thị bên dưới vòng tròn khu vực trên màn hình.

Các Chiều rộng đột quỵ tài sản cần phải lớn hơn một chút so với các vòng tròn khác, để tạo ra sự xuất hiện của một phác thảo thực sự.

     < /circle>      

Kết thúc đề cương

Vì phác thảo không bao gồm các đầu của vòng tròn bán nguyệt, chúng tôi cũng thêm 2 dòng khoảng 2px vào cuối bằng cách thêm một vòng tròn khác bằng một chiều dài dấu gạch ngang 2px và một chiều dài khoảng cách của nửa chu vi trừ 2px. Do đó, giá trị của đột quỵ tài sản của vòng tròn này là 2, 469.

Mặt nạ

Bây giờ, hãy thêm một vòng tròn khác sau các vùng phạm vi thấp, trung bình và cao. Vòng tròn mới sẽ hoạt động như một mặt nạ để ẩn các vùng khu vực không cần thiết khi đồng hồ đo sẽ được vận hành.

Các thuộc tính của nó sẽ giống như các đặc tính của vòng tròn phác thảo và màu đột quỵ của nó cũng sẽ là màu xám. Mặt nạ sau đó sẽ được thay đổi kích thước bằng Javascript để hiển thị các vùng bên dưới nó để đáp ứng với thanh trượt đầu vào.

Mã kết hợp cho đến nay là như dưới đây.

Nếu chúng ta muốn tiết lộ một vùng dưới mặt nạ, chúng ta cần giảm kích thước của mặt nạ chiều dài dấu gạch ngang. Ví dụ, khi giá trị của đột quỵ tài sản của vòng tròn mặt nạ là 157, 943, các cung sẽ đứng ở trạng thái sau:

Vì vậy, tất cả những gì chúng ta phải làm bây giờ là điều chỉnh đột quỵ của mặt nạ sử dụng JavaScript cho hình ảnh động. Nhưng trước khi chúng tôi làm điều đó, như tôi đã đề cập trước đó, cho bản demo cuối cùng của tôi, tôi đã sử dụng CSS và JavaScript để tính toán và thêm hầu hết các thuộc tính SVG.

Dưới đây bạn có thể tìm thấy mã HTML, CSS và mã JavaScript dẫn đến kết quả tương tự như trên.

HTML

Tôi đã thêm một hình ảnh kim (đo-kim.svg), một thanh trượt phạm vi (đầu vào # thanh trượt) cho đầu vào của người dùng và nhãn (nhãn # lbl) để hiển thị giá trị thanh trượt trong phạm vi 0-100.

    0 
 

CSS

Mã CSS bên dưới thêm quy tắc kiểu vào SVG, vì hình dạng SVG có thể được tạo kiểu giống như các phần tử HTML. Nếu bạn muốn đọc thêm về cách tạo kiểu SVG bằng CSS, hãy xem bài viết này. Để tạo kiểu thanh trượt, hãy xem bài đăng này.

 #wrapper vị trí: tương đối; lề: tự động;  #meter chiều rộng: 100%; chiều cao: 100%; biến đổi: rotationX (180deg);  .circle điền: none;  .outline, #mask đột quỵ: # F1F1F1; chiều rộng đột quỵ: 65;  .range Stro-width: 60;  #slider, #lbl vị trí: tuyệt đối;  #slider con trỏ: con trỏ; trái: 0; lề: tự động; phải: 0; hàng đầu: 58%; chiều rộng: 94%;  #lbl màu nền: # 4B4C51; bán kính đường viền: 2px; màu trắng; font-Family: 'chuyển phát nhanh mới'; cỡ chữ: 15pt; font-weight: in đậm; đệm: 4px 4px 2px 4px; phải: -48px; hàng đầu: 57%;  #meter_needle chiều cao: 40%; trái: 0; lề: tự động; vị trí: tuyệt đối; phải: 0; tôp 10%; biến đổi-nguồn gốc: trung tâm dưới cùng; / * định hướng sửa chữa * / biến đổi: xoay (270deg); 

JavaScript

Trong JavaScript, trước tiên, chúng tôi tính toán và đặt kích thước của trình bao bọc và tất cả các cung, sau đó chúng tôi thêm kích thước phù hợp đột quỵ các giá trị cho các vòng tròn. Sau đó, chúng tôi sẽ liên kết một sự kiện tùy chỉnh với thanh trượt phạm vi để thực hiện hoạt ảnh.

 / * Đặt bán kính cho tất cả các vòng tròn * / var r = 250; var circle = document.querySelector ALL ('. circle'); var Total_circles = circle.length; cho (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); 

Trang phục, Hải quan phạm vi_change_event () Chức năng

Hành vi của đồng hồ được thực hiện bởi phạm vi_change_event () chức năng tùy chỉnh chịu trách nhiệm điều chỉnh kích thước mặt nạ và hình ảnh động của kim.

Nó nhận giá trị thanh trượt (đầu vào của người dùng) trong khoảng từ 0 đến 100, chuyển đổi nó thành tương đương bán chu vi (mét_value) của một giá trị trong khoảng 471-0 (471 là nửa chu vi cho bán kính 150) và đặt giá trị đó mét_value như chiều dài dấu gạch ngang của mặt nạ đột quỵ bất động sản.

Các phạm vi_change_event () chức năng tùy chỉnh cũng xoay kim sau khi chuyển đổi đầu vào của người dùng (trong phạm vi 0-100) thành mức độ tương đương 0-180.

270 ° được thêm vào vòng quay của kim trong đoạn mã trên bởi vì hình ảnh tôi sử dụng là của kim thẳng đứng và ban đầu tôi phải xoay nó 270 ° để làm cho nó nằm thẳng về bên trái của nó.

Cuối cùng, tôi ràng buộc phạm vi_change_event () chức năng cho thanh trượt phạm vi, để đồng hồ đo có thể được vận hành với nó.

Kiểm tra bản giới thiệu hoặc xem mã nguồn của chúng tôi Kho lưu trữ Github.