SVG 아이콘 애니메이션
[구현]
1. SVG 태그란?
- SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미한다.
- SVG태그는 SVG그래픽을 담기 위한 요소이다.
- SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있다.
- SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있다.
- svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그이다.
2. SVG의 stroke 속성
- stroke : 선색 속성
- stroke-width : 선 굵기 속성
- stroke-linecap : 선의 양쪽 끝 모양 속성
- stroke-dasharray : 점선처리 속성 ( 홀수번째 적은 숫자는 선의 길이, 짝수번째 적은 숫자는 공백의 길이 )
- stroke-dashoffset : 점선을 어디서 부터 보여줄지 지정하는 속성 (0일경우 맨 처음부터)
만약 stroke-dasharray의 인자가 1개인 경우 인자 a만큼 fill,empty를 반복한다.
3. 애니메이션 구현방법
사진과 같은 애니메이션을 구현하는 원리는 간단하다.
1. "stroke-dasharray" 를 이용해 하나의 점선의 크기가 아이콘 테두리 만큼 커지게 조정하고 맞춘다.
2. 찾아낸 "stroke-dasharray 수치" 와 "stroke-dashoffset 의 수치"를 일치시키면 아이콘 테두리가 사라진다.
=> 점선1개의 길이 수치 끝 길이부터 시작한다는 의미 이기때문에 점선의 크기가 아이콘 테두리를 다 덮을 만큼 커진 상황에서는 테두리가 사라진것처럼 보인다.
3. 마지막으로 애니메이션은
@keyframes animate-heart {
0% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: 점선수치;
}
80% {
stroke-dashoffset: 점선수치*2;
fill: transparent;
}
100% {
stroke-dashoffset: 점선수치*2;
fill: 채우고 싶은 색상;
}
}위와 같이 애니메이션을 구성하면
- 0% ~ 40% : 0 -> "점선수치" 까지 가며 테두리가 사라지게 된다.
- 40% ~ 80% : "점선수치" 한개로 테두리가 다 가려지게 되니 점선수치 2배일때는 당연히 테두리가 다시 나타나게 된다.
- 80% ~ 100% : 마지막은 색상을 transparent 에서 바꾸고 싶은 색상으로 적용하면 된다.
See the Pen animate SVG icon by DongGyun Sea (@seadonggyun4) on CodePen.
출처:
Animate Any SVG icons with CSS Only | SVG Stroke Animation With Html CSS - YouTube