1. preview

> 어떻게하면 그림이 그려지는 효과를 줄까?

!codepen[kumjungmin/embed/zYoEOWB?height=265&theme-id=dark&default-tab=css,result]

2. 코드 설명

1) 어떻게 하면 그림이 생겼다가 사라질까?

  • 우리는 먼저 svg 이미지를 준비해야한다.
  • 그리고 svg 이미지dasharray, dashoffset을 사용하면 그려지는 효과를 줄 수 있다.

2) stroke-dasharray, svg에 간격 주기

<path  d="패스 데이터"  pathlength="길이">
  • 만약 path의 길이가 100이고, dasharray가 50이라면 이 그림은 절반만 보이게 된다.
  • 그런데, dasharray가 path와 같다면? svg가 모두 보여진다.

|원본(1000)|dasharray= 100|dasharray= 200|
|---|---|---|
||||


3) stroke-dashoffset, svg을 나타낼 지점 지정하기

  • 이 svg그림이 어떤 지점에서부터 시작할지 정해주는 속성이다.
  • 아래 그림은 dasharray: 950일 때에 서로 다른 dashoffset을 준 모습이다.

|dashoffset= 150|dashoffset= 550|dashoffset= 850|
|---|---|---|
||||
|150 지점부터 그림이 나타남|550 지점부터 그림이 나타남|850 지점부터 그림이 나타남|



우리는 앞선 설명을 통해 svg이미지에 dasharray, dashoffset을 사용하면 svg이미지를 원하는 만큼 보여줄 수 있다는 걸 알게 되었다. 그렇다면 preview에서 본 애니메이션은 어떻게 만들까?


4) svg에 애니메이션 넣기

(1) stroke-dasharray 설정하기

: svg 이미지의 stroke-dasharray을 최대값으로 설정한다.


(2) stroke-offset 설정하기

: stroke-offsetstroke-dasharray와 동일한 값으로 설정한다.
: 아래 그림이 같이 stroke-offset == stroke-dasharray 인 경우 그림이 보이지 않는다.


(3) keyframe으로 애니메이션 추가하기

: stroke-offset을 사용하여 그림을 어떤 지점에서부터 보여줄지 애니메이션으로 설정한다.

|0%|50%|100%|
|---|---|---|
|stroke-dashoffset: 500|stroke-dashoffset: 0|stroke-dashoffset: -500|
|500지점부터 보여줌(안보이는 상태)|0부터 보여줌(그림이 다 나타난 상태)|-500부터 보여줌(반대로 그려지는 상태)|
!codepen[kumjungmin/embed/gOLGvpG?height=265&theme-id=dark&default-tab=html,result]


: 만약 100%에서 500으로 설정하는 경우, 아래와 같이 작동한다.

|0%|50%|100%|
|---|---|---|
|stroke-dashoffset: 500|stroke-dashoffset: 0|stroke-dashoffset: 500|
|안보이는 상태|시계 방향으로 그림이 나타나게 됨|반 시계방향으로 그림이 사라짐|
!codepen[kumjungmin/embed/ExNwQVx?height=464&theme-id=dark&default-tab=css,result]


(4) 마무리

: 우리는 맨 윗 지점부터 그림이 나타나길 바란다.
: 이 경우 transform을 사용해 그림을 90도 회전하면 완성이다!
!codepen[kumjungmin/embed/RwoLxeG?height=265&theme-id=dark&default-tab=css,result]



출처

  • https://css-tricks.com/svg-line-animation-works/
  • https://steadev.tistory.com/43
  • https://hoiheart.medium.com/svg-%EC%86%90%EA%B8%80%EC%94%A8-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC-301cdd8d4cf6
profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

0개의 댓글