SVG를 이용한 애니메이션 효과
✏️SVG를 이용한 애니메이션 효과를 알아보자
보통, 로딩바 같은 경우 동그라미가 계속 돌아가는 형태를 많이 쓰기 때문에 쉽게 볼 수 있다.
HTML,CSS로만 저걸 구현할 수 있나? 생각을 하다, SVG로 구현을 할 수 있다는 것을 알게 되었다.
우선 HTML을 보자.
<svg class="loading-svg">
<circle cx="50%" cy="50%" r="25" class="loading-circle"></circle>
</svg>
svg 태그 안에 circle 태그를 생성하고, cx 50%, cy 50%, r 25로 설정해준다.
cx, cy는 중심점이고, r은 반지름으로 25일 경우 50 크기인 circle이 생긴다.
위의 html이라면, 위처럼 동그란 검은 공이 하나 생긴다.
로딩 애니메이션이라면, 가운데는 비어야 하고, 테두리만 있어야 하는데, 이는 CSS로 설정해줄 수 있다.
fill: transparent;
stroke: blue;
stroke-width: 4;fill: 색상을 설정하는 속성으로 transparent로 배경색으로 맞추거나, white, none 등으로 설정한다.
stroke: 선의 색상을 설정하는 속성이다.
stroke-width: 선의 width를 설정하는 속성이다.
위의 css 속성을 추가하면, 파란색 테두리를 가진 공으로 바뀐다.
이제 애니메이션 효과를 줄 차례인데, 앞서 stroke-dasharray, stroke-dashoffset 속성에 대해 알아볼 필요가 있다.
stroke-dasharray는 대시 간격 및 길이를 지정한다. (사실 말로 설명하기 어려워서 직접 해보는 걸 추천한다.)
stroke-dasharray는 어디서 시작할지 지정한다.
그럼 이제 애니메이션을 구현하는 CSS animation을 작성해보자.
body {
font-family: sans-serif;
}
@keyframes loading {
0% {
stroke-dashoffset: 157;
}
70% {
stroke-dashoffset: -140;
}
100% {
stroke-dashoffset: -157;
}
}
.loading-svg circle {
animation: loading 1s infinite;
}
.loading-circle {
fill: transparent;
stroke: blue;
stroke-width: 4;
stroke-dasharray: 157;
stroke-dashoffset: 0;
}
157이라는 숫자는, circle의 길이로써, getTotalLength() 로 구할 수 있다.