jquery로 퍼센트를 표시해보자!

JS
jQuery, svg, circle, animation

발단

스터디에서 스터디 하시는 분이 소개팅 어플을 개발하고 계신데 거기에서 상대 매칭율을 이쁘고 아름답게 구현하심. 나도 해보고 싶었음. 하지만 쉽지 않았음.

SVG로 원을 그려보자

일단 우리에게는 원이 필요하다. svg로 원을 그려보자!

1
2
3
4
5
<div id = "cont">
    <svg viewPort="0 0 320 320" width="320" height="320" id="svg" xmlns="http://www.w3.org/2000/svg">
        <circle id="path" cx="160" cy="160" r="100" stroke="#000000" fill="none" stroke-width="10" stroke-linecap="round"></circle>
    </svg>
</div>

See the Pen NaoyoY by shin (@hololloy) on CodePen.

그럼 이렇게 이쁜 원이 그려지는 것을 볼 수 있다.
다음단계에서는 어떻게 원에 애니메이션을 주느냐인데 여기에서 알아야 할 CSS속성이 있다.

stroke-dasharray, stroke-dashoffset

stroke-dasharray

dasharray는 점의 길이와 간격 속성을 부여한다. dasharray에 대한 설명은 여기에서 자세히 볼 수 있다.

stroke-dashoffset

specifies the distance into the dash pattern to start the dash

즉, 대시를 시작하기 위해 대시 패턴으로의 거리를 지정하는 것. 모르겠다 이건…어디 블로그에서는 점으로 만들어주는 속성이라고 하는데….얼렁뚱땅 다음 단계로 넘어가보자!

본격적인 애니메이션 작업

stroke-dasharray와 stroke-dashoffset을 설정하기 위해서는 일단 원의 둘레 길이를 알아야한다. 우리는 위에서 r(반지름)이 100인 원을 그렸는데 이 원의 둘레는 빠밤

2πr = 628.3185307179587

이렇게 나오는데 이 속성값을 클래스 cir에 넣어줘야 한다.
(자바스크립트에서 π는 Math.PI로 계산 할 수 있다.) 

1
2
3
4
#svg .cir{
  stroke-dasharray: 628.3185307179587;
  stroke-dashoffset:0;
}

이렇게 하면 아무 변화가 없는데 여기에 애니메이션을 넣는다.

1
2
stroke-dashoffset: 628.3185307179587;
transition: stroke-dashoffset 1s linear;

그러면 원이 세시 방향에서부터 사라지는 것을 볼 수 있다.
이건 svg circle의 특성으로 작업을 용이하게 하기 위해서 시계 반대방향으로 90도 돌려주자.

1
2
3
#svg {
   transform: rotate(-90deg);
}

이렇게 하면 offset수치 변화에 따른 애니메이션을 본 것이다. 포스팅을 하면서 알게된 것은 변화가 있을 때에만 애니메이션을 볼 수 있다는 것(당연한 것을…)
자, 이제 우리의 시작점은 12시에 숨어있을 것이다. 데이터를 변수 val에 입력하여 그것이 애니메이션으로 나타나게 작업을 진행해보자.

작업의 순서는 다음과 같다
특정 값 지정->값에 따른 호의 길이 계산-> css에 입력

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    var val = 50;   //특정 값 입력(퍼센트 계산이기 때문에 0~100 사이의 값 입력)
    var $circle = $('#svg .cir');   
    var r = $circle.attr('r');   //
    var per = ((100 - val) / 100) * Math.PI *r * 2; //호의 길이 계산
    $circle.css(
        strokeDashoffset: per
    ); //css에 offset 수치 입력
});

이렇게 하면 다음과 같은 결과가 나온다.

See the Pen QqYmjZ by shin (@hololloy) on CodePen.

$(document).ready(function(){});이 함수로 한번 더 감싸주지 않아서 자꾸 오류가 생겼는데 여기에 넣으니 해결. 오늘은 여기까지 그럼 안녕~

안녕~ 이제 힘들어~

공유하기 댓글