main-logo

stroke-dasharray & stroke-dashoffset 업로드 애니메이션

stroke-dasharray와 stroke-dashoffset을 활용한 간단한 업로딩 애니매이션 구현하기

profile
nagaeso
2024년 11월 26일 · 0 분 소요

들어가며

SVG(Scalable Vector Graphics)의 stroke-dasharray와 stroke-dashoffset 속성을 활용하면 간단하면서도 시각적인 업로딩 효과를 볼 수 있습니다. HTML과 CSS만으로 구현할 수 있어, 웹 페이지의 성능에 미치는 영향도 최소화할 수 있습니다.

 

 

stroke-dasharray

선의 패턴을 정의합니다. 실선(dash)과 공백(space)의 길이를 지정하여 점선이나 파선 등을 만들 수 있습니다.

 

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 300 300" fill="none"> 
  <circle cx="50" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="200" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
</svg>

CSS

circle:nth-of-type(1) {
  stroke-dasharray: 5;
}
circle:nth-of-type(2) {
  stroke-dasharray: 5 2;
}

값이  <number>인 경우 현재 단위 공간에 의해 크기가 정해지는데

circle:nth-of-type(1)의 패턴은 실선 5, circle:nth-of-type(2)은 실선 5와 공백 2를 나타냅니다.

 

결과

 

 

stroke-dashoffset

선의 시작점을 조절합니다. 이 값을 변경하면 선이 이동하는 것처럼 보이게 할 수 있습니다.

 

HTML

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#EEE" />
  <g stroke="red" stroke-width="3" stroke-dasharray="20, 2">
    <path d="M 10,10 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

CSS

path:nth-of-type(1) {
  stroke-dashoffset: 0;
}
path:nth-of-type(2) {
  stroke-dashoffset: -2;
}
path:nth-of-type(3) {
  stroke-dashoffset: 2;
}

실선 20, 공백 2로 정의하고 각각의 offset 값을 넣어주었습니다.

순서대로

  1. 0은 기본값입니다.

  2. 시작점을 5단위 뒤로 이동합니다. (음수)

  3. 시작점을 5단위 앞으로 이동합니다. 

 

결과

 

 

<circle />로 업로드 애니메이션 구현하기

업로드 애니메이션을 구현하기 위해 circle로 테스트를 했습니다. 

 

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="200" viewBox="0 0 100 100" fill="none">
  <circle cx="-150" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="-35" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="80" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="200" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
</svg>

CSS

circle:nth-of-type(1) {
  stroke-dasharray: 282;
  stroke-dashoffset: 0
}
circle:nth-of-type(2) {
  stroke-dasharray: 282;
  stroke-dashoffset: 50
}
circle:nth-of-type(3) {
  stroke-dasharray: 282;
  stroke-dashoffset: 260
}
circle:nth-of-type(4) {
  stroke-dasharray: 282;
  stroke-dashoffset: 540
}

순서대로

  1. stroke-dasharray의 값을 circle의 둘레만큼 정의

  2. 시작점을 50단위 앞으로 이동하였더니 그만큼 gap이 생성

  3. 시작점의 값이 circle의 둘레와 가까워질수록 gap이 넓어져 없어짐

  4. 시작점의 값이 circle의 둘레를 넘어가면 다시 그려짐

 

결과

 

SVG 애니메이션에서 원의 둘레를 넘어가는 값을 사용할 때, 2배수를 기준으로 원의 둘레를 초과하는 값은 원을 여러 번 그리는 효과를 만듭니다.

값이 100일 때 원이 한 바퀴 그려집니다.
값이 200일 때 원이 두 바퀴 그려지고 다시 처음 위치로 돌아옵니다.
값이 250일 때 원이 두 바퀴 반 그려집니다.

위 결과로 움직임에 대한 윤곽이 나왔습니다. @keyframes를 활용하여 동적 효과를 줍니다.

 

 

더 활용하기 

 

 

마치며

stroke-dasharray와 stroke-dashoffset의 속성을 이해하고 간단하면서도 동적인 애니매이션을 만들어 보았습니다. 간결하고 효율적인 성능 등 SVG 애니메이션이 가진 장점이 흥미롭게 느껴진 시간이 되었습니다. 앞으로 다양한 UI 요소에 활용해 봐야겠네요 😀

감사합니다.

 

 

참고 문서