불규칙한 SVG 스트로크로 필기 애니메이션을 얻는 방법

나는 서예 글꼴에 대한 필기 애니메이션을하고 싶었습니다. 즉, 단어가 보이지 않는 펜으로 쓰여지는 것처럼 애니메이션이있는 종류입니다. 서예 글꼴은 뇌졸중 너비가 고르지 않기 때문에 (실제로 SVG 측면에서도 스트로크가 아님) 전형적인 경로 애니메이션 기술로 이런 종류의 일을하는 것은 거의 불가능했습니다. 그러나 나는 몇 분 만에 이러한 영향을 얻기 위해 SVG 마스킹의 혁신적인 적용을 발견했습니다.

이 작업을 수행하는 방법을 연구하는 동안 여러 출처에서 정보를 수집했습니다. 나는 그것들을 함께 결합하고 최종 효과를 만들 수있었습니다.

이것을 함께 만들자!

SVG 마스킹

단어 나 문장의 모든 글자의 뇌졸중 너비가 심지어 전체적으로 있으면 Craig Roblewsky는 필기를 애니메이션하는 좋은 방법을 가지고 있습니다. 이것은 SVG 스트로크-다슈어 및 스트로크 오프셋 속성을 애니메이션하는 영리한 기술입니다.

우리가 여기서 애니메이션을 원하는 것처럼 서예 글꼴은 문자 전체에 걸쳐 뇌졸중 너비가 고르지 않으므로 이어야하며 그러한 방식으로 애니메이션이 작동하지 않아야합니다. 트릭은 SVG 마스킹을 사용하는 것입니다.

우리가 어떤 글꼴을 사용하고 싶은지 알아 내면서 시작합시다. 이 기사 전체에서 내가 사용할 수있는 것은 Haseartone이며, 필기에 완벽한 브러시 스트로크 모양이 있습니다.

아이디어는 우리가 애니메이션하고자하는 동일한 문장으로 을 만들고 문장 위에 놓는 것입니다. 다시 말해, 같은 문장의 두 층이있을 것입니다. 마스크가 맨 위에 놓여 있으므로, 우리는 그것을 흰색으로 만들어서 그 아래의 원래 문장을 숨길 것입니다. 애니메이션이 실행될 때 하단 레이어가 드러나도록 마스크를 애니메이션 할 것입니다.

레이어 만들기

이 속임수의 기초는 실제로 우리는 실제로 하나는 다른 하나의 두 개의 별도 레이어를 만들 것이라는 것입니다.

1. 하단 층은 원하는 글꼴이있는 단어입니다 (제 경우에는 HaIrtone입니다).
2. 상단 레이어는 단어를 근사화하는 수제 경로입니다.

수제 경로를 만드는 것은 생각만큼 어렵지 않습니다. 우리는 애니메이션과 문장을 공개하기위한 지속적인 길이 필요합니다. 그것은 이것에 대한 가 없음을 의미합니다. 그러나 많은 사람들이 Illustrator를 포함한 앱을 설명합니다. 문자를 경로로 변환 할 수 있습니다.

1. 단어를 선택하십시오.
2. "속성"패널을 열고 개요 작성을 클릭하십시오.

그리고 마술과 마찬가지로 글자는 모양을 따르는 벡터 포인트가있는 윤곽선이됩니다.

이 시점 에서이 경로에 의미있는 이름을 제시하는 것이 매우 중요하며,이 경로는 레이어로 저장됩니다. 이를 SVG로 기대할 때 앱은 코드를 생성하고 해당 계층 이름을 ID 및 클래스로 사용합니다.

개별 문자가 어떻게 채우지만 뇌졸중이 없는지 주목하십시오.

SVG에서는 원하는 방식으로 스트로크를 애니메이션 할 수 있으므로 두 번째 메인 레이어 인 마스크로 만들어야합니다. 펜 도구를 사용하여 글자를 추적 할 수 있습니다.

1. 펜 도구를 선택하십시오.
2. 채우기 옵션을 "없음"으로 설정하십시오.
3. 스트로크 너비는 사용중인 글꼴에 따라 다릅니다. 스트로크 너비 옵션을 5px로 설정하고 색상을 검은 색으로 설정합니다.
4. 그리기 시작!

내 펜 도구 기술은 좋지 않지만 괜찮습니다. 중요한 것은 완벽하지는 않지만 마스크가 그 아래의 층을 덮습니다.

각 글자에 마스크를 만들고 레이어에 좋은 이름을 사용해야합니다. 그리고 같은 문자 중 하나 이상이있는 마스크를 확실히 재사용합니다. 동일한 "A"문자를 반복해서 다시 주도 할 필요가 없습니다.

수출

다음으로 SVG 파일을 내보내야합니다. 이는 사용중인 응용 프로그램에 따라 다릅니다. 일러스트 레이터에서는 파일 → 내보내기 → 내보내기 → SVG 로 할 수 있습니다.

SVG 옵션 팝업이 열리 며 아래는이 예제에 대한 선호하는 설정입니다.

이제 모든 앱이 SVG를 동일한 방식으로 내보내는 것은 아닙니다. 일부는 슬림하고 효율적인 코드를 생성하는 데 탁월한 일을합니다. 다른 사람은 그리 많지 않습니다. 어느 쪽이든, 코드 편집기에서 파일을 열어 두는 것이 좋습니다.

우리가 SVG와 함께 일할 때, 성능을 위해 가능한 한 가볍게 만들기 위해 고려해야 할 몇 가지 팁이 있습니다.

1. 점수가 적을수록 파일이 가벼워집니다.
2. 더 작은 뷰 박스를 사용하면 도움이 될 수 있습니다.
3. SVG를 더욱 최적화하는 도구가 많이 있습니다.

SVG 코드를 수동으로 편집합니다

이제 모든 앱이 SVG를 동일한 방식으로 내보내는 것은 아닙니다. 일부는 슬림하고 효율적인 코드를 생성하는 데 탁월한 일을합니다. 다른 사람은 그리 많지 않습니다. 어느 쪽이든, 코드 편집기에서 파일을 열고 몇 가지 변경을하는 것이 좋습니다.

할 가치가있는 것 :

1. 최종 설계 크기로 설정된
3. 그림 앱에 명명 된 레이어를 기반으로 IDS와 그룹 요소 ()가있을 수 있습니다. 이 특정 데모에는 #마케팅-라브 (개요)와 #마케팅 마스크 (마스크)의 두 그룹 요소가 있습니다. 마스크를 요소로 옮깁니다. 이것은 시각적으로 숨길 것입니다. 이것이 우리가 원하는 것입니다.
4. 마스크 그룹 안에는 경로가있을 것입니다. 그렇다면 계속해서 변환 속성을 제거하십시오.
5. 각 경로 요소를 에 감고. 마스크 클래스와 마스크가있는 문자를 나타내는 ID를 제공하십시오.

예를 들어:

 <mask>
 
마스크></mask>

개요 그룹 내부 ( #마케팅 -LAB의 ID를 제공 한) 마스크를 사용하여 마스크를 각 문자 경로 요소에 적용하십시오.

 <g>
 <path mask="url (#mask-marketing-m)" d="m427,360, ..."></path>
</g>

위의 모든 수정을 사용하여 하나의 문자 코드는 다음과 같습니다.

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 381 81">
 <title> 마케팅 실험실 </title>
 <defs>
  <g>
   <mask>
    
   마스크>
  </mask></g>
 </defs>
 <g>
  
 </g>
</svg>

마지막으로, 우리는 문서의 배경색에 숨겨져있는 뇌졸중 색상을 흰색으로 무시하는 .mask 요소에 대한 CSS를 추가합니다.

 .마스크 {
 채우기 : 없음;
 뇌졸중 : #fff;
}

생기

우리는 CSS 스트로크-다슈어 속성을 애니메이션하여 연속 라인 공개 효과를 얻을 것입니다. CSS 및 Javasscript 또는 Greensock (GSAP)으로 애니메이션을 수행 할 수 있습니다. 우리는 두 가지 접근법을 모두 살펴볼 것입니다.

CSS 및 JavaScript

CSS만으로는이 작업을 수행하는 것이 매우 간단합니다. JavaScript를 사용하여 경로 길이를 계산 한 다음 반환 된 값을 사용하여 애니메이션 할 수 있습니다. JavaScript를 전혀 사용하지 않으려면 경로 길이를 한 번, 해당 값을 CSS에 한 번 계산할 수 있습니다.

 / * 스트로크-나시 가이와 스트로크-산시 오프셋을 설정 */
.마스크 {
 뇌졸중-다셔 : 1000;
 스트로크-산시 오프셋 : 1000;
}


/ * 애니메이션 스트로크-파시 오프셋은 제로 길이 */
@keyframes strokeoffset {
 에게 {
  스트로크-산시 오프셋 : 0;
 }
}


/ * 각 마스크에 애니메이션을 적용 */
#Mask-M {
 애니메이션 : StrokeOffset 1s 선형 전방;
}

JavaScript는 대신 해당 경로로 가려면 계산에 도움이 될 수 있습니다.

 // 마스크를 배열에 넣습니다
const masks = [ 'm', 'a', 'r', 'k-1', 'k-2', 'e', ​​'t-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']


masks.foreach ((마스크, 인덱스, el) => {
 const id =`#mask- $ {mask}`// prepend #마스크- 각 마스크 요소 이름에 마스크-
 let path = document.queryselector (id)
 const length = path.getToTallength () // 경로의 길이 계산
 path.style.strokedasharray = 길이; // 스타일에서 길이를 스트로크-다슈어로 설정합니다
 path.style.strokedAshoffset = 길이; // 스타일에서 길이를 뇌졸중으로 설정합니다
})

GSAP

GSAP에는 DrawSVG 플러그인이있어 svg , , , , , 또는 의 스트로크를 점차적으로 드러내거나 숨길 수 있습니다. 후드 아래에서는 CSS 스트로크-산시 오프 세트 및 스트로크-다슈어 속성을 사용하고 있습니다.

작동 방식은 다음과 같습니다.

1. 코드에 GSAP 및 DrawSVG 스크립트를 포함하십시오.
2. Autoalpha를 사용하여 처음에 그래픽을 숨기십시오.
3. 타임 라인을 만듭니다.
4. 그래픽의 Autoalpha를 true로 설정하십시오.
5. 모든 문자 경로 마스크 ID를 올바른 순서로 타임 라인에 추가하십시오.
6. DrawSVG를 사용하여 모든 문자를 애니메이션하십시오.

참조

1. Jake Archibald의 SVG의 애니메이션 드로잉 라인
2. Cassie Evans의 로고 애니메이션 만들기

위 내용은 불규칙한 SVG 스트로크로 필기 애니메이션을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!