SVG 및 CSS로 텍스트를 애니메이션하는 방법

SVG 및 CSS를 사용하여 애니메이션 텍스트 효과를 만듭니다

최근에 나는 친구 Jez가 열정의 뉴스 레터 웹 사이트를 만들도록 도와 주었고, 제목의 "열정"이라는 단어가 약간 움직이게한다면 어떻게해야합니까? 예를 들어, 단어의 모든 문자가 활력으로 위아래로 두드리면 어떨까요?

효과는 다음과 같습니다.

아주 멋져요? SVG를 사용하여 텍스트를 만들고 CSS를 사용하여 애니메이션을 만들 수 있다는 것을 알고 있습니다. 각 문자는 자체 클래스 이름이있는 경로이므로 각 문자를 선택할 수 있습니다. 즉,이를 달성하기 위해 HTML과 CSS를 사용하는 것을 막을 수는 없습니다. SVG를 사용하는 것은 당시에는 적절하다고 생각한 한 가지 방법이었습니다.

먼저 Figma를 열고 별도의 텍스트 상자에 텍스트를 입력합니다. 여기에서 "Outline Stroke"메뉴 항목을 클릭하면 ...

… 각 문자마다 별도의 벡터를 얻을 수 있습니다. SVG를 내보낼 때 각 요소에 대한 올바른 CSS 클래스를 추가하는 데 도움이됩니다. 각 문자의 스트로크를 그린 후에는 벡터의 포인트를 편집 할 수 있습니다 (그러나 우리가하려고하는 일을 위해 우리는 이것을 할 필요가 없습니다).

모든 텍스트를 상자에 넣고 "개요 스트로크"를 클릭하면이 모든 글자를 포함하는 단일 벡터를 만듭니다. 그런 다음 좌표가있는 단일 경로를 만들어냅니다.이 경로는 스타일을 지정하고 거기에서 무슨 일이 일어나고 있는지 이해하기가 매우 어렵습니다.

다음으로, 나는이 모든 글자를 프레임에 넣고 (스케치를 아트 보드라고 부르고) 각 단어를 그룹에 넣었습니다. 이런 식으로 SVG로 내보낼 때 각 단어는 자체 g 태그로 이루어 지므로 문자를 스타일링하는 데 도움이됩니다.

그런 다음 SVG를 내보냈습니다 - 그러나! —— 내보낼 때 ID 옵션이 포함되어 있는지 확인해야합니다.

우리가 이것을하지 않으면, 우리는 각 문자에 대해 많은 경로 요소를 얻을 수 있지만 ID 속성은 없습니다.

내보내면 다음과 같은 결과를 얻습니다.

나는 얼마나 이상한 일이 나의 문제인지 잘 모르겠다. Figma의 SVG 수출 문제는 몇 개입니까?<rect></rect> 불필요하기 때문에 요소. 그런 다음 신체 요소의 배경을 설정하여 텍스트를보고 SVG 자체의 인라인 높이와 너비 특성을 제거 할 수 있습니다.<rect></rect>

기이! 이제 우리는 흥미로운 부분에 들어갈 수 있습니다.

위의 예에서 HTML을 보면 Figma의 프레임 워크 이름과 동일한 g 요소가 있음을 알 수 있습니다. 각 단어에는 g 요소가 있으며 단어를 형성하는 각 경로에는 별도의 ID가 있습니다. (그렇기 때문에 프레임 워크와 그룹의 이름을 올바르게 지정하고 모든 디자인 응용 프로그램에서 좋은 조직을 유지하는 것이 중요합니다.)

저를 놀라게 한 한 가지는 각 경로에 대한 수출 순서였습니다. 그것은 내가 예상 한 순서와 반대 였고, "열정"그룹의 첫 번째 편지는 M이었습니다.

애니메이션이 작동하기 위해 먼저 각 글자를 2 픽셀로 움직입니다.

 G 경로 {
  변환 : Translatey (2px);
}

이것은 각 문자가 2 픽셀을 점프하기를 원하기 때문입니다. 나중에 그것에 대해 이야기 할 것입니다. 또한이 변경으로 SVG Viewport도 업데이트해야한다는 것을 알았습니다. 그렇지 않으면 각 문자의 바닥이 차단됩니다.

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

아마도 Figma의 프레임 워크 내부의 텍스트를 재배치하고 다시 내보내야 할 것입니다. 그러나 그것은 내가 필요한 것에 충분합니다.

이제 SVG에서 세 번째 그룹을 찾을 수 있으며 ( "열정"이라는 단어) animation-count Infinite로 설정할 수 있습니다.

 / * "열정"이라는 단어를 대상으로합니다 */
G : Nth-Child (3) 경로 {
  애니메이션-이름 : WiggleWiggle;
  애니메이션 기간 : 2.5S;
  애니메이션-고유 한 카운트 : 무한;
}

위의 코드는 다음 wiggleWiggle 애니메이션을 호출합니다.

 @keyframes WiggleWiggle {
  20%,
  100% {
    변환 : 번역 (0, 2px); / * 대부분의 애니메이션 기간 동안 기준선에 머무르십시오 */
  }

  0% {
    변환 : 번역 (0, 0px); / * 홉 업 */
  }
  10% {
    변환 : 번역 (0, 2px); / * 기준으로 돌아 가기 */
  }
}

그 키 프레임의 시작을 보셨습니까? 20% , 100% 부품을 보셨습니까? "대부분의 애니메이션의 기준선에 모든 텍스트를 유지하는 것"을 의미합니다. 이것이 각 리바운드 사이에 좋은 지연을 가져 오는 것입니다.

나는 애니메이션 시간에 Geoff 의이 좋은 기사 에서이 트릭을 배웠으며 CSS 애니메이션 학습을 시작하려면 체크 아웃하는 것이 좋습니다.

지금은 흥미로운 부분입니다. animation-delay 속성을 사용하면 이전 문자 후에 각 문자를 구부릴 수 있습니다. 나는 이것을 할 수있는 더 똑똑한 방법이 있지만, 나는 다음과 같이 각 문자의 ID를 사용했습니다.

 #E {
  애니메이션-지연 : 0S;
}

#N {
  애니메이션-지연 : 0.1S;
}

#T {
  애니메이션-지연 : 0.15s;
}

#시간 {
  애니메이션-지연 : 0.2S;
}

#U {
  애니메이션-지연 : 0.25s;
}

#s_2 {
  애니메이션 지연 : 0.3S;
}

#나 {
  애니메이션-지연 : 0.35S;
}

#a {
  애니메이션-지연 : 0.4S;
}

#s {
  애니메이션-지연 : 0.45s;
}

#중 {
  애니메이션 지연 : 0.5S;
}

정말 지저분하지만 루프를 쓰면 많은 시간을 절약하지 못하고 앞으로 업데이트 할 필요가 없으므로 충분하다고 생각합니다. 이런 식으로, 우리는 거의 끝났습니다!

이제 우리는 인사 할 수있는 생생한 타이틀을 가지고 있습니다. 구타하는 말을 응원하십시오!

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