SVG의 대시 애니메이션을 사용하여 손으로 그린 ​​텍스트 애니메이션 효과를 만드는 방법은 무엇입니까?

SVG를 사용하여 웹 페이지에서 필기 텍스트에 애니메이션을 적용하는 방법은 무엇입니까?

문제 설명:

SVG로 저장한 텍스트에 애니메이션을 적용하려고 시도했지만 애니메이션만 가능했습니다. 원하는 효과가 아닌 스트로크에 애니메이션을 적용합니다. 주어진 예와 유사한 애니메이션을 구현하여 손으로 그린 ​​듯한 느낌을 주고 싶습니다. 지금까지의 내용은 다음과 같습니다.

코드 샘플:

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

답변:

애니메이션 달성하려는 목표는 표준 대시 애니메이션 기술을 사용하지만 손으로 ​​그린 ​​것과 유사한 윤곽선으로 애니메이션 스트로크를 자릅니다. 스타일.

대시 애니메이션 기술:

다음과 같은 표준 선은 다음과 같습니다.

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"></path>

획 값을 제어하여 애니메이션을 만듭니다. 키프레임 애니메이션의 dasharray 및 획-대시 오프셋.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

여기서 예를 들어, 스트로크 대시선 속성은 경로를 따라 대시와 간격의 길이를 정의하고, 스트로크 대시오프셋은 경로 내 대시의 오프셋을 정의합니다. 애니메이션이 0%에서 100%로 진행됨에 따라 획-대시 오프셋 값이 감소하여 대시가 경로를 따라 점진적으로 나타납니다.

손으로 그린 ​​모양 만들기:

윤곽선으로 애니메이션 스트로크를 자르려면 애니메이션 스트로크의 너비와 색상과 일치하는 스트로크와 함께 추가 SVG 경로가 사용됩니다. 이 윤곽선 경로는 애니메이션 스트로크가 차지할 전체 영역을 포함해야 합니다. 연귀할 윤곽선의 획-라인 결합 속성을 정의하면 손으로 그린 ​​선 같은 느낌을 주는 날카로운 모서리 스타일이 만들어집니다.