SVG: Dasharray, Dashoffset 및 Masking을 사용하여 필기 텍스트에 애니메이션을 적용하는 방법은 무엇입니까?

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

목표

이 가이드에서는 SVG 텍스트에 애니메이션을 적용하여 손글씨의 매혹적인 효과. 우리는 발견된 것과 같은 모범적인 애니메이션에서 영감을 받은 기술을 탐구할 것입니다. 여기:

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen.io/munkholm/pen/EaZJQE

구현

이 매혹적인 손글씨 효과를 얻기 위해 우리는 텍스트의 획에만 애니메이션을 적용하는 표준 접근 방식에서 벗어났습니다. 대신 앞서 언급한 뛰어난 애니메이션에서 영감을 얻을 것입니다.

기술 1:

• 경로의 획 대시 배열 및 획 대시 오프셋 속성을 애니메이션화합니다.
• 원하는 손으로 그린 ​​윤곽선으로 애니메이션 획을 자릅니다. 모양.

JavaScript 코드:

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS:

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

기술 2:

• 손으로 그린 ​​도형의 윤곽선으로 마스크를 만듭니다.
• 경로를 따라 마스크 위치를 애니메이션화합니다.

자바스크립트 코드:

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS:

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

SVG 마스크:

<defs>
  <mask>

추가 참고:

• 특정 요구 사항에 맞게 애니메이션 타이밍과 경로를 사용자 정의하세요.
• 다양한 그리기 스타일을 실험하여 독특한 손으로 그린 ​​효과를 얻으세요.
• 고해상도 SVG를 사용하여 텍스트의 복잡한 세부사항을 보존하거나 모양.

라이브 데모:

CodePen에서 대화형 예제 보기:

위 내용은 SVG: Dasharray, Dashoffset 및 Masking을 사용하여 필기 텍스트에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!