손글씨 제스처로 SVG 텍스트 애니메이션

이 기사에서는 예제에 나온 매혹적인 손글씨 같은 텍스트 애니메이션을 만드는 데 사용되는 기술을 자세히 살펴보겠습니다. CodePen.io/se7ensky/pen/waoMyx와 같은 CodePen.io/munkholm/pen/EaZJQE.

표준 대시 애니메이션 기술 이해

Se7ensky 애니메이션은 표준 대시 애니메이션 기술을 교묘하게 활용합니다. 이 기술의 내용은 다음과 같습니다.

1. 연속 획 그리기: 텍스트 경로를 따라 연속 획을 만듭니다.
   
   
   

    <path></svg>

   
   

   
   
2. 획의 대부분 숨기기: 설정 Stroke-dasharray 속성을 ​​획보다 큰 값으로 설정 실제 길이로 설정하여 처음에는 획의 대부분을 숨깁니다.
   
   
   

    획-dasharray: 300;<br>}

   
   

   
   

3. 획 애니메이션: CSS 애니메이션을 사용하여 획을 드러내는 Stroke-dashoffset 속성을 ​​점차적으로 줄입니다. 마치 그려지는 것처럼.
   

   
   

   @keyframes draw {<br> to {</p>
   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">stroke-dashoffset: 0;

   로그인 후 복사

   }
   }

   경로 {

   애니메이션: 그리기 15s 1;
   }