SVG 애니메이션

2021-12-03

SVG

SVG는 CSS와 SMIL로 애니메이션을 구현할 수 있다.

STROKE 애니메이션

stroke-dasharray: 길이를 설정한다.
stroke-dashoffset: 밀린 위치를 설정한다.

원

@keyframes dash-ani {
    from {stroke-dashoffset: 700;}
    to {stroke-dashoffset: 0;}
}

circle {
    stroke: black;
    stroke-width: 5;
    stroke-dasharray: 700; // 길이를 설정
    stroke-dashoffset: 0; // 밀린 위치
    fill: transparent;
    animation: dash-ani 2s;
}

1
2
3

<svg viewBox="0 0 800 500">
    <circle cx="400" cy="250" r="100"></circle>
</svg>

path

@keyframes dash-ani {
    from {stroke-dashoffset: 700;}
    to {stroke-dashoffset: 0;}
}

path {
    stroke: black;
    stroke-width: 5;
    stroke-dasharray: 727;
    fill: transparent;
    animation: dash-ani 2s;
}

1
2
3

<svg viewBox="0 0 800 500">
    <path d="M 50 400 C 50 400, 300 500, 400 400 C 400 400, 600 170, 700 300"></path>
</svg>

1 2	// 길이를 알 수 있다 console.log (document.querySelector('path').getTotalLength());

SMIL 애니메이션의 기본 사용법

SMIL 이란?
Synchronized Multimedia Integration Language (SMIL 3.0)
CSS 애니메이션이 아직 처리하지 못하는 것들을 처리할 수 있기 때문에 사용한다.

attributeName : 바꿀 속성이 어떤 것인지 기술한다.
dur : 얼마만큼의 시간동안 재생을 시킬 것인지 설정한다.
to : 목적 위치를 기술한다.
repeatCount : 얼마나 반복할지를 설정한다. (무한반복은 indefinite)
fill : default값을 지정한다. 설정하지 않으면 맨처음으로 돌아간다.
begin : 언제 시작할지 설정한다. (indefinite를 입력할 경우 시작하지 않는다.)

<svg viewBox="0 0 1000 1000">
    <rect class="rect" x="10" y="10" width="20%" height="20%" />
    <animate class="ani" attributeName="x" dur="1s" to="700" repeatCont="3" fill="freeze" begin="indefinite"></animate>
</svg>

// 클릭시 움직이게 한다
window.addEventListener('DOMContentLoaded', () => {
    const rect = document.querySelector('.rect');
    const ani = document.querySelector('.ani');

    rect.addEventListener('click', () => {
        ani.beginElement();
    });
});

REFERENCE
인프런 SVG 마스터
https://www.inflearn.com/course/mastering-svg