Stroke 애니메이션 기본

Stroke 애니메이션 중 stroke-dasharray와 stroke-dashoffset을 배워보자

<!DOCTYPE html>
<html>
  <head>
    <style>
      @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 infinite;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 800 500">
      <circle cx="400" cy="250" r="100"></circle>
    </svg>
  </body>
</html>

stroke-dasharray는 도형의 점선을 이루는 정도를 나타내며 stroke-dashoffset은 선이 나타나는 비율을 의미한다. 위와 같이 stroke-dasharray가 700이고, stroke-dashoffset이 0이면 아래와 같이 원형이 만들어짐

스크린샷 2022-01-24 오후 11.04.56.png

stroke-dashoffset을 350으로 하면 절반정도 찬 원이 되며, stroke-dashoffset을 0으로 하면 선이 아예 사라지게 된다. 이를 애니메이션으로 위 소스처럼 구현하면 아래와 같은 동작이 가능해진다.

220124-1.gif

다른 모양도 만들어보자. 아래와 같은 path가 자연스럽게 애니메이션 되는 것을 구현해보고자 한다.

<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>

스크린샷 2022-01-24 오후 11.16.20.png

이선을 자연스럽게 그리려면 먼저 이 선의 길이를 알아야 한다. 눈대중으로 알 수 없으니 이를 알 수 있는 getTotalLength()메서드가 존재 함

console.log(document.querySelector("path").getTotalLength()); // 726.1061401367188

path {
  stroke: black;
  stroke-width: 5;
  stroke-dasharray: 727; /* getTotalLength() 메서드 적용 */
  stroke-dashoffset: 0;
  fill: transparent;
  animation: dash-ani 2s; /* dash-ani 적용 */
}

220124-2.gif

그래픽 로고가 그려지는 애니메이션 만들기

위에서 배운 stroke-dasharray와 stroke-dashoffset 메서드를 가지고 재미있는 애니메이션을 구현해보자.

스크린샷 2022-01-26 오후 11.37.55.png

위 로고를 그래픽 로고가 그려지는 애니메이션으로 만들어보고자 한다. 해당 로고는 폰트로 그려져있어서 path 태그로 구현되어있지 않다. 따라서 해당 파일에 애니메이션 효과를 주려면 직접 팬툴로 path를 따야함..(주륵)

스크린샷 2022-01-26 오후 11.44.14.png

펜툴로 그릴 때 폰트와 100% 유사하게 라인을 딸수는 없으므로 폰트를 덮도록 path를 이어 딴 뒤 mask 효과를 이용해 폰트 부분만 노출될 수 있도록 효과를 주면 된다..! 이렇게 해서 path를 딴 이미지가 바로 아래에 있다.