HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현

 

오랜만에 포트폴리오 포스팅을 하네요 :)

오늘은 저의 두번째 포트폴리오 메인에 사용된 디자인을 같이 구현해볼까합니다.

먼저 한번 완성작을 같이 보시죠

포트폴리오 로고 애니메이션

 

해당 완성작은 웹페이지에서 작동하는 것을 녹화한 거입니다.

 

SVG파일을 먼저 만들러 가봅시다!!

일단 일러스트를 켜주세요 :)

 

chpofo.tistory.com/39

포트폴리오 시작 - 로고제작

해당 로고를 만들었을때 사용했던 필기체 글꼴를 사용해서 만들어봅시다.

 

1. 해당 글꼴로 원하는 글씨를 써주세요

1단계 : 원하는 글꼴로 원하는 글씨 적기

 

2. 폰트를 깨주기 위해서 폰트를 선택하고 오른쪽 마우스 → Create Outlines
(아웃라인 만들기 단축키는 shift+ctrl+O)

2단계 : 아웃라인 만들기

아웃라인을 만들면

아웃라인을 만들게 되면 위와같기 Stroke는 없고 Fill이 채워지게 되는데

저희는 Fill이 아니고 Stroke가 필요하다

그래서 1단계가 더 필요로 하다

 

3. 펜툴을 이용하여 라인따기

펜툴을 이용해서 해당 글씨를 똑같이 그려준다

핵심은 stroke로 그려주는거다

3단계 : 펜툴로 라인 따기

일단 저는 라인을 따고 두께도 대충 맞추어 주기 위해서 stroke를 5px을 주니까 대충 맞았다.

펜툴로 라인을 딸때는 알파벳별로 개별로 따도 되고 이어서 따도 상관없다.

저는 중간에 연결하기 애매해가지고 한두번 끊어서 진행을 했다.

펜툴로 라인을 다 땄으면 라인딴거만 빼고는 다 지워도 상관은 없다.

 

원래는 해당 원본이 보이게 진행을 하는게 정상이지만 저는 그 방법을 이해를 못해서 저의 방법을 찾아서 해보고 괜찮아서 소개를 시켜드리는겁니다. 펜툴이 너무 이상하거나 원본이랑 차이가 많이 나면 이방법보다 원본을 사용하는 방법으로 다시 해보시는게ㅠㅠ 저는 펜툴이 자신이 없지만 최대한 비슷하게 따서 사용하러 합니다.

 

 + 펜툴로 조각조각 땄으면 해당 레이어를 이름을 정해서 저장을 해야한다

레이어 이름 설정

 

4. 다 지우고 아트보드크기도 조절을 해서 SVG로 내보내기를 하면 준비는 끝이 난다.

4단계 : SVG로 내보내기

 

5단계 : SVG파일을 편집기를 통해서 열어서 소스를 확인한다

저는 메모장을 통해서 소스를 확인해보도록 하겠습니다.

메모장으로 열어서 한줄로 나열된 것을 정리를 해보니까 SVG가 어떻게 구성됬는지 확인할 수 있었다.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 236.56">
<defs>
    <style>.cls-1{fill:none;stroke:#e30613;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;}</style>
</defs>
    <path id="ch" class="cls-1" d="M242.7,160.37s-25.48,20.15-47.4,23.41-11.86-32-11.86-32c-1.18-17.19-19.25,18.66-37.63,35s-28.14,12.74-6.22-40.89,65.78-118.52,75.85-107-23.7,61.92-49.48,91-41.48,35-56,40.3-37.92,8-42.37-2.67,10.37-18.07,16-15.1-5.09,6.43-5.09,6.43"/>
    <path id="aen" class="cls-1" d="M253.67,156.81s-8.3-4.14-12.15,6.52,10.67,2.08,12.44-.89,5-12.74,5-12.74-17.48,34.08,11.85,31.71S314.7,158.89,320,158.89s16.59-2.67,12.74-7.7-16.59,6.51-16.59,15.7,10.66,21.63,51.55,1.48l16.89-9.78s-14.22,21.34-3,18.37c0,0,20.14-36.74,27.55-34.07s-19.85,32,0,39.41,59-24.6,59-24.6"/>
    <line id="spot" class="cls-1" x1="482.11" y1="132.81" x2="478.56" y2="139.33"/>
    <path id="i" class="cls-1" d="M473.22,149.7s-18.07,29.93,3.26,32.3,53.63-23.11,53.63-23.11"/>
</svg>

아까 저장하기전에 설정한 레이어들의 이름들이 보이시나요??

해당 레이어의 이름들이 id값으로 들어가진것이 보이시면 제대로 저장이 된겁니다.

 

해당 소스를 html에 추가를 하게 되면 거의 진행이 된것이다.

이제는 CSS를 이용해서 SVG를 움직이게하면 된다

 

우선 아이디가 ch인거부터 움직이게 해봅시다.

일단 추가해야하는 CSS 소스는 아래와 같습니다

#ch{stroke-dasharray: 620; stroke-dashoffset: -620;animation: ch-anim 2s linear .0s forwards;}

@keyframes ch-anim {
   from {stroke-dashoffset : -620px;}
   to {stroke-dashoffset : 0px;}
}

 

stroke-dasharray와 stroke-dashoffset에 대한 간단히 설명을 하자면

- stroke-dasharray는 점선을 만들어주는 속성이고

- stroke-dashoffset은 어디부터 시작할 것인지 정해주는 속성이다.

 

해당값은 JS을 통해서 많이들 정확한 값을 구하시던데 저는 또 이해를 하지 못해서

저의 방법은 개발자 모드에서 제가 직접 숫자를 올려봐서 글자가 다 나오면 값을 구하는 방법입니다.

 

개발자 모드에서 stroke-dasharray의 값만 변경을 해서 원하는 모양이 나올때까지 값을 변경을 하면 됩니다.

그리고 소스로 와서 offset값에도 적용을 하면 움직이는 애니메이션을 적용할 수 있어요

 

개발자모드에서 값을 변경해보기

키프레임을 적용을 해서 움직이게 해주게 되면 되는데 저기부분을 '-'값으로 적용을 안하면 써져야 하는 순서가 아니고 반대로 적용이 되어서 '-'값을 줬봤는데 원하는 방향으로 적용이 잘 되더라고요

그래서 저는 '-'값으로 주긴 했는데 저처럼 했는데 반대로 나온다면 '-'를 빼고 적용을 해보세요

 

나머지도 똑같은 방법으로 값을 찾아서 적용을 하면 이렇게 되는거겠죠??

완성작

 

#ch{stroke-dasharray: 620; stroke-dashoffset: -620;animation: ch-anim  1s linear 0s forwards;}
#aen{stroke-dasharray: 460; stroke-dashoffset: -460;animation: aen-anim 1s linear 1s forwards;}
#spot{stroke-dasharray: 10; stroke-dashoffset: -10;animation: sp-anim .1s linear 2s forwards;}
#i{stroke-dasharray: 100; stroke-dashoffset: -100;animation: i-anim  .3s linear 2s forwards;}

@keyframes ch-anim {
  from {stroke-dashoffset : -620px;}
  to {stroke-dashoffset : 0px;}
}
@keyframes aen-anim {
  from {stroke-dashoffset : 460px;}
  to {stroke-dashoffset : 0px;}
}
@keyframes sp-anim {
  from {stroke-dashoffset : 10px;}
  to {stroke-dashoffset : 0px;}
}
@keyframes i-anim {
  from {stroke-dashoffset : 100px;}
  to {stroke-dashoffset : 0px;}
}

완성작의 CSS입니다.

여기서 확인해야하는 부분은 해당 레이어들이 나타날 타이밍을 맞추는거다

#ch는 1초에 걸려서 0초에 나타나라

#aen은 1초에 걸려서 1초후에 나타나라

#spot은 0.1초에 걸려서 2초후에 나타나라

#i은 0.3초에 걸려서 2초후에 나타나라

 

이숫자와 관련된것들도 직접 조절하면서 괜찮은 속도와 타이밍을 맞추면 이쁜 애니메이션을 만들수 있을것이다.

 

오랜만에 하려다보니까 헷갈리고 무슨 자료를 참고를 했었는지 기억이 안나서

저의 포트폴리오 소스를 보고 제가 다시 이해를 하고 정리를 하느라 좀 머리가 아팠네요

이것보다 더 깔끔하고 원본을 이용하는 방법도 있는데 저에게는 이게 최선이였어요..

패스를 잘 사용해서 폰트를 이용하는게 아니고 저만의 그림과 저만의 사인들을 잘 그려서 

넣어도 이쁠거 같아요^^

 

이해가 안돼거나 설명이 잘못된 부분이 있으면 댓글로 남겨드리면 수정을 하겠습니다.

기억을 더듬으면서 정리한거여서 순서없이 정리된거 같아서 아쉽긴한데

이것도 여기까지가 저의 최선인거같아요ㅎㅎ

 

작성하면서 찾은 참고 사이트는 아래에 링크걸어두도록 하겠습니다.

그럼 좋은 포트폴리오를 위해서 서로 함께 화이팅합시다!!

How to Get Handwriting Animation With Irregular SVG Strokes | CSS-Tricks

How SVG Line Animation Works | CSS-Tricks

 

 

 

궁금하신 점이나 이해하기 어려운 부분은

댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^

 

 

 

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)