SVG 라인을 애니메이션하는 방법

HTML 페이지에 약간의 역동성을 추가하기 위해 특히 아이콘에 일부 애니메이션을 추가할 수 있습니다. 그래서 우리는 그것을 시도하기 위해 간단한 SVG 라인 애니메이션을 할 것입니다.

천천히 시작

먼저 원을 그려봅시다. 우리의 기반이 될 것입니다.

애니메이션 추가

원을 애니메이션하기 위해 다음 속성을 사용합니다.

stroke-dasharray: 선 대시 크기를 정의합니다.

stroke-dashoffset: 선의 시작과 첫 번째 대시 사이의 오프셋을 정의합니다.

예시


그런 다음 애니메이션은 간단합니다. 전체 선을 측정하는 대시를 만들고 동일한 길이의 오프셋을 추가합니다. 그런 다음 애니메이션으로 오프셋 크기를 줄이고 그림이 나타납니다.

But how can we know the exact size of a line?

약간의 자바스크립트를 사용하면 이 정보를 검색할 수 있습니다.

pathElement.getTotalLength()

따라서 이 정보를 자바스크립트 루프로 추가하면 첫 번째 애니메이션을 만들 수 있습니다!



만세! 우리는 해냈다!

조금 더!

여기서 우리는 첫 번째 단계를 완료했습니다. 이제 더 복잡한 애니메이션을 만들고 싶다면 다른 선을 추가하여 행성 아이콘을 그릴 수 있습니다.



그런 다음 애니메이션의 일부를 지연시켜 멋진 SVG 라인 애니메이션을 갖도록 여러 클래스를 추가하기만 하면 됩니다.





이 게시물을 즐기셨기를 바랍니다. 공유할 다른 팁이 있는 경우 주저하지 말고 댓글에 게시하거나 직접 게시물을 작성하고 여기에 링크를 공유하세요! :)