[JavaScript] svg path 스크롤 애니메이션(1) - stroke-dasharray, stroke-dashoffset

 

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다.

👉 맛있는 코딩 강좌 바로가기

 

stroke-dasharray

모양의 윤곽을 칠하는 데 사용되는 대시 및 간격의 패턴을 정의하는 표시 속성.

stroke-dasharray CSS 속성으로 사용할 수 있습니다.

stroke-dasharray는 <path> 엘리먼트를 dash형태로 바꿔주는 역할을 합니다.

홀수번째 인자는 대쉬의 길이, 짝수번째 인자는 공백의 길이를 나타내는데

위 그림과 같이 길이가 1000인 <path> 엘리먼트가 있을 때 stroke-dasharray가 100 100이면

 

 

첫 번째 100은 dash의 길이, 두 번째 100은 공백의 길이가 되어 1000이 될 때까지 이 두 인자가 반복되며 채워집니다.

 

 

그리고 하나의 인자 1000만 주어진다면 dash의 길이와 공백의 길이를 각각 1000씩 준다는 의미로

1000짜리 길이의 패스에서는 꽉 채워진 선으로 보일 것입니다.

 

 

나중에 path를 직접 그려와서 활용할 때

구불구불한 path의 총길이를 다음과 같이 자바스크립트 함수로 쉽게 구할 수 있습니다.

 

stroke-dashoffset

연결된 대시 배열의 렌더링에 대한 오프셋을 정의하는 표시 속성.

stroke-dashoffset CSS 속성으로 사용할 수 있습니다.

stroke-dashoffset은 얼마큼 공백을 둬서 어디서부터 그릴지에 관한 속성입니다.

1. stroke-dashoffset을 1000px로 설정하게 되면 1000px 뒤부터 그리니까 화면에는 아무것도 안 보이는 형태가 됩니다.

2. stroke-dashoffset을 950px로 설정하게 되면 950px 뒤부터 그리니까 끝에 살짝 그려지게 됩니다.

3. stroke-dashoffset을 600px로 설정하게 되면 600px 뒤부터 그립니다.

4, 5번도 마찬가지로 200px뒤부터, 100px 뒤부터 그려지게 됩니다.

6. 마지막으로 stroke-dashoffset이 0일 때는 전부 보이는 형태가 됩니다.

 

이 dashoffset을 스크롤의 높이에 따라 1000에서 0 사이 값으로 변경시켜 주면

선이 그려지는 애니메이션을 만들 수 있습니다.

 

다음과 같이 화면, <path>와 <path>를 감싸는 div가 있다고 가정했을 때 👇

화면이 패스가 그려질 시작 지점까지 내려오면 path가 그려지기 시작해서 👇

요기👇 지점에서 끝나려면 비율 ratio를 구해야 합니다.

화면이 path가 시작되는 지점에서 있을 때 ratio 0을 구하기 위해서는

화면이 맨 위부터 내려온 지점 window.scrollY와 화면의 높이 window.innerHeight를 더한 값에서 div의 offsetTop를 빼주고

div의 offsetHeight로 나눠주면 ratio를 구할 수 있습니다. 👇

 

마찬가지로 화면이 path 마지막 지점에 있을 때 ratio 1을 구하기 위해서도 같은 공식을 가지는데요

window.scrollY와 window.innerHeight를 더한 값에서 div의 offsetTop를 빼주고 div의 offsetHeight로 나눠주면

ratio 1이 나오게 됩니다. 👇

 

마지막으로 예시를 한번 더 보겠습니다.

<path> 앨리먼트의 총길이인 length가 1000px이고 화면이 <path>가 시작되는 지점에 위치해 있을 때

<path>는 우선 아무것도 그려져 있지 않아야 하죠.

 

stroke-dashoffset이 1000px이어야 1000px 뒤부터 그리는 거니까 화면에 아무것도 안 보이게 됩니다. 👇

그럼 저 화면의 위치에서 dashoffset 1000px을 구하기 위해서는 1000 - 1000 * 0과 같이 되어야 하니까

즉 length 빼기 length를 아까 구한 ratio를 곱해서 빼주면 됩니다. ☝️ 

 

 

화면이 이렇게 이동했을 때는 ratio가 1이니까 1000 - 1000 * 1이 되어 1000 - 1000이 돼서

dashoffset이 0이 되고 그럼 모두 그려진 형태가 됩니다. 👇

 

원리에 대해 모두 알아보았으니 다음 포스팅에선 코드를 작성해 볼게요~!

[JavaScript] svg path 스크롤 애니메이션(2)