애니메이션 SVG 속도계 만드는 법

에이 게이지 미터 주어진 범위 내의 값을 시각적으로 나타내는 도구입니다. 컴퓨터에서 “디스크 공간 표시기” 게이지 미터를 사용하여 사용 가능한 전체 디스크 공간에서 사용되는 디스크 공간을 표시합니다. 게이지는 범위 전체에 걸쳐 영역 또는 영역을 가지며 각 영역은 자체 색상으로 구분됩니다. 프런트 엔드 개발에서는 특정 범위 내의 데이터를 표시하는 HTML5 태그.

이 게시물에서 우리는 반원 모양의 SVG 게이지 미터, 그것을 움직이게하십시오. 이 미리보기 GIF를 보시고 파이어 폭스에서 최종 버전이 어떻게 작동 할까?:

미터기 범위는 0-100입니다., 표시합니다. 3 개의 동등한 구역 노란색, 파란색 및 빨간색. 필요에 따라 영역의 범위와 수를 변경할 수 있습니다..

설명을 위해 수동 계산을 수행하고 다음 단계에서 인라인 SVG 속성 / 속성을 사용합니다..

그러나 최종 데모에서는 CSS 및 JavaScript를 사용하여 SVG 속성을 더 유연하게 계산하고 삽입합니다..

1. 원 그리기

SVG에서 간단한 원을 그리자. HTML5의 새로운 기능 태그를 사용하면 HTML 코드에 SVG 권한을 추가 할 수 있습니다. 내부 태그에 SVG 모양은 다음과 같습니다.

CSS에서는 폭 과 신장 래퍼의 속성 (원의 직경보다 크거나 같음) (이 예에서는 300px입니다). 우리는 또한 너비와 높이를 #미터 요소를 100 %.

 #wrapper width : 400px; 높이 : 400px;  #meter width : 100 %; 높이 : 100 %; 

2. 원에 윤곽을 추가하고 채우기를 제거합니다.

의 도움으로 행정 과 획 폭 SVG 속성에 서클에 개요를 추가하고 채우기 = "없음" 우리는 서클의 채우기도 제거합니다..

3. 원의 절반 만 덮어 라.

그만큼 획 - 대시 배열 SVG 속성은 파선 테두리를 만들고 두 값을 취합니다., 대시 길이 과 간격 길이.

반원 윤곽의 경우 대시 길이 값은 원의 반 원주와 같아야하므로 대시가 원의 원주 반을 덮고 간격 길이 값은 나머지 둘레와 같거나 그 이상이어야합니다..

그것이 더 많으면 브라우저에 의해 나머지 원주로 변환 될 것이므로 우리는 전체 둘레 값을 사용합니다. 간격 길이. 이렇게하면 남은 둘레를 계산하지 않아도됩니다..

계산을 봅시다.

$\mathrm{둘레}=2Ã\; ??\; Â\; ??\; ??¢Â\; ??\; ??\; ??\pi \times \mathrm{아르\; 자형}$

어디에 아르 자형 반지름입니다. 반경이 150 인 경우 원주는 다음과 같습니다.

$\begin{array}{}\mathrm{둘레}=2Ã\; ??\; Â\; ??\; ??¢Â\; ??\; ??\; ??\pi \times \mathrm{150}\\ \mathrm{둘레}=942.48\end{array}$

이것을 2로 나누면 반 원주에 대해 471.24가됩니다. 획 - 대시 배열 150 반경 원에서 반원 윤곽의 속성은입니다. 471, 943. 이 반원은 계기의 저 범위 구역을 표시하는 데 사용됩니다.

보시다시피 거꾸로 된 것이므로 SVG를 추가하여 변환 값이있는 CSS 속성 rotateX (180deg) ~로 HTML 요소.

 #meter transform : rotateX (180deg); 

4. 다른 영역을 추가하십시오

그만큼 중간 구역 (파란색)은 반원의 2/3 부분을 덮어야하고 471의 2/3는 314입니다. 따라서 SVG에 다른 원을 추가해 봅시다. 획 - 대시 배열 속성을 다시 사용하지만 이제는 314, 943.

  < /circle>  

그만큼 최종 존 (빨간색)은 반원의 마지막 1/3 부분을 덮어야하며 471의 1/3은 157이므로이 값을 획 - 대시 배열 세 번째 서클의 속성.

5. 미터 개요 추가

더보기 좋게하기 위해 미터에 회색 외곽선을 추가합시다. 그만큼 대시 길이 윤곽선 원의 반경과 동일해야합니다. 코드의 다른 모든 서클 앞에 배치하여 브라우저에서 먼저 렌더링, 따라서 지역 원 아래에 표시됨 화면에.

그만큼 획 폭 실제 윤곽선을 나타 내기 위해 속성이 다른 서클보다 약간 더 커야합니다..

     < /circle>      

개요 끝

윤곽선이 반원의 끝을 덮지 않으므로 두 줄에 약 2px를 추가합니다. 대시 길이 2px 및 간격 길이 반원에서 마이너스 2px. 따라서 획 - 대시 배열 이 서클의 속성은입니다. 2, 469.

마스크

이제 낮은, 평균 및 높은 범위 영역 뒤에 다른 원을 추가해 보겠습니다. 새로운 원은 게이지 미터가 작동 될 때 불필요한 구역을 숨기기위한 마스크 역할을합니다..

그 속성은 윤곽선 원의 속성과 동일하며 획 색상도 회색입니다. 마스크는 나중에 Javascript로 크기가 조정되어 입력 슬라이더에 대한 응답으로 그 아래의 영역을 표시합니다..

지금까지 결합 된 코드는 다음과 같습니다..

마스크 밑의 영역을 표시하려면 마스크의 크기를 줄여야합니다. 대시 길이. 예를 들어, 획 - 대시 배열 마스크 원의 속성은입니다. 157, 943, 아크는 다음과 같은 상태가됩니다.

이제 우리가해야 할 일은 획 - 대시 배열 애니메이션 용 JavaScript를 사용하여 마스크의 이전에 언급했듯이 CSS와 JavaScript를 사용하여 대부분의 SVG 속성을 계산하고 추가했습니다..

아래에서 HTML, CSS 및 JavaScript 코드를 찾으십시오. 위와 동일한 결과가 나타납니다..

HTML

나는 바늘 이미지 (gauge-needle.svg), 범위 슬라이더 (입력 # 슬라이더)를 사용자 입력에 연결하고 레이블 (레이블 # lbl)를 사용하여 0-100 범위의 슬라이더 값을 표시합니다..

    0 
 

CSS

아래의 CSS 코드는 SVG 셰이프가 HTML 요소와 같은 방식으로 스타일을 지정할 수 있으므로 SVG에 스타일 규칙을 추가합니다. CSS로 SVG 스타일을 지정하는 방법에 대한 자세한 내용은이 게시물을 참조하십시오. 슬라이더의 스타일을 지정하려면이 게시물을 확인하십시오..

 #wrapper 위치 : 상대적; 여백 : 자동;  #meter width : 100 %; 높이 : 100 %; 변환 : rotateX (180deg);  .circle fill : none;  .outline, #mask stroke : # F1F1F1; 스트로크 - 폭 : 65;  .range 획 폭 : 60;  #slider, #lbl 위치 : 절대;  #slider 커서 : 포인터; 왼쪽 : 0; 여백 : 자동; 오른쪽 : 0; 상단 : 58 %; 너비 : 94 %;  #lbl background-color : # 4B4C51; border-radius : 2px; 색깔 : 백색; font-family : '택배 신규'; 글꼴 크기 : 15pt; font-weight : bold; 패딩 : 4px 4px 2px 4px; 오른쪽 : -48px; 상위 : 57 %;  #meter_needle 신장 : 40 %; 왼쪽 : 0; 여백 : 자동; 위치 : 절대; 오른쪽 : 0; 탑 10%; 변환 원점 : 하단 중앙; / * orientation fix * / transform : rotate (270deg); 

자바 스크립트

자바 스크립트에서 먼저 래퍼와 모든 호의 크기를 계산하고 설정 한 다음 적절한 획 - 대시 배열 값을 서클에 추가합니다. 그런 다음 애니메이션을 수행하기 위해 범위 슬라이더에 맞춤 이벤트를 바인딩합니다..

 / * 모든 원에 대한 반지름 설정 * / var r = 250; var circles = document.querySelectorAll ( '. circle'); var total_circles = circles.length; for (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); 

관습 range_change_event () 기능

유량계의 동작은 range_change_event () 마스크 크기 및 바늘의 애니메이션 조정을 담당하는 사용자 지정 함수.

0-100 사이의 슬라이더 값 (사용자 입력)을 가져 와서 반원 상응하는 값으로 변환합니다 (meter_value)의 값을 471-0 (471은 반경 150의 반경)으로 설정하고 meter_value ~로서 대시 길이 마스크의 획 - 대시 배열 재산.

그만큼 range_change_event () 사용자 정의 함수는 사용자 입력 (0-100 범위에서 오는)을 0-180의 등가 도로 변환 한 후 바늘을 회전합니다.

위의 코드에서 바늘의 회전에 270 °를 더했습니다. 왜냐하면 제가 사용했던 이미지가 직립형 바늘 이었기 때문에 처음에는 270 ° 회전시켜 왼쪽에 평평하게 놓아야했기 때문입니다..

마지막으로, 나는 range_change_event () 기능을 범위 슬라이더에 연결하여 게이지 미터를 작동시킬 수 있습니다.

체크 아웃 데모 또는 소스 코드를 살펴보십시오. Github 저장소.