CSS로 SVG 스트로크를 애니메이션하는 방법은 무엇입니까?

SVG 스트로크 애니메이션 효과를 구현하려면 CSS의 스트로크-다슈어 및 스트로크-산시 오프셋 특성을 통해 라인 드로잉을 제어해야합니다. 1. JavaScript를 사용하여 경로 길이를 얻습니다. const length = path.getToTallength (); 2. CSS 의이 길이 값으로 스트로크-다슈어 및 스트로크-산시 오프셋을 설정하십시오. 3. 도면 효과를 달성하기 위해 경로의 전체 길이에서 0으로 애니메이션을 통해 0으로 전송합니다. JavaScript 트리거 또는 @KeyFrames Pure CSS 구현을 선택할 수 있습니다. 채우기를 사전 클리어링하고, 애니메이션 최종 상태를 유지하고, 너무 빠른 애니메이션을 피하고, 반응 형 디자인의 길이를 동적으로 재 계산하는 데주의를 기울이십시오. 이 방법은 스트로크가있는 모든 SVG 모양 요소에 적합하며 최종 효과는 정확한 경로 길이 계산 및 속성 조정에 따라 다릅니다.

CSS를 사용하여 SVG 스트로크를 애니메이션하는 것은 화면에 그리는 선과 같은 드로잉 효과를 만드는 데 인기있는 기술입니다. 이 효과의 핵심은 CSS를 사용하여 stroke-dasharray 및 stroke-dashoffset 특성을 조작하는 데 있습니다. 단계별로 수행하는 방법은 다음과 같습니다.

스트로크 애니메이션 기술 이해

SVG 스트로크 애니메이션은 대시 길이와 간격이 신중하게 제어되는 점선을 생성하여 작동합니다. 두 가지 CSS 속성을 사용합니다.

• stroke-dasharray : 대시와 갭의 패턴을 정의합니다.
• stroke-dashoffset : 대시 패턴이 시작되는 위치를 정의합니다 (오프셋처럼 작용).

stroke-dasharray 경로의 총 길이로 설정하고 전체 길이에서 0까지 stroke-dashoffset 을 사용하여 그린 라인의 환상을 만듭니다.

1 단계 : SVG 경로 길이를 가져옵니다

먼저, 애니메이션하려는 SVG 경로의 총 길이를 알아야합니다. JavaScript를 사용하여 이것을 얻을 수 있습니다.

 const path = document.querySelector ( '#your-path-id');
const length = path.getToTallength ();
Console.log (길이); // 예를 들어, 500

이 값을 유지하십시오 - CSS에서 사용할 것입니다.

2 단계 : CSS 설정

경로에 #draw-path 와 같은 ID가 있다고 가정하면 다음 CSS를 적용합니다.

 #Draw-Path {
  뇌졸중-다셔 : 500; / * 경로 길이와 동일 */
  스트로크-산시 오프셋 : 500; / * 위와 동일 */
  전환 : Stroke-Dashoffset 2S Ease-In-out;
}

이제 stroke-dashoffset (예 : 0)을 제거하거나 줄이면 라인은 "그 자체를 그리기"합니다.

페이지로드에서 애니메이션을 트리거하려면 클래스를 사용하십시오.

 #draw-path.animate {
  스트로크-산시 오프셋 : 0;
}

그런 다음 JavaScript를 통해 animate 클래스를 추가하거나 순수한 CSS 접근 방식에 @keyframes 사용하십시오.

옵션 A : JavaScript로 애니메이션 (제어 권장)

 window.addeventListener ( 'load', () => {
  const path = document.querySelector ( '#draw-path');
  const length = path.getToTallength ();

  // 초기 상태를 설정합니다
  path.style.strokedasharray = 길이;
  path.style.strokedAshoffset = 길이;

  // 애니메이션을 트리거합니다
  settimeout (() => {
    path.style.strokedAshoffset = 0;
  }, 100); // 렌더링을 허용하는 작은 지연
});

옵션 B : @keyframes가있는 순수한 CS

CSS 전용 방법을 선호하고 경로 길이를 알고있는 경우 :

 @keyframes draw {
  에게 {
    스트로크-산시 오프셋 : 0;
  }
}

#Draw-Path {
  뇌졸중-다셔 : 500;
  스트로크-산시 오프셋 : 500;
  애니메이션 : 2S의 편안한 전달을 그리십시오.
}

참고 : 정확한 경로 길이를 미리 알고있는 경우에만 작동합니다.

팁과 모범 사례

• 처음에 경로를 숨기십시오 : path { stroke: #000; fill: none; } 채우지 않도록하십시오.
• 애니메이션에서 forwards 사용하십시오 : 최종 상태가 유지됩니다.
• 복잡한 경로를 너무 빨리 애니메이션하지 마십시오 . 불안 해 보일 수 있습니다.
• 브라우저 전체의 테스트 : 대부분의 최신 브라우저는이를 지원하지만 항상 확인하십시오.

예제 SVG 설정

 <svg viewbox = "0 0 100 100">
  <경로
    id = "draw-path"
    D = "M10 10 C 20 20, 40 20, 50 10" "
    fill = "none"
    스트로크 = "검은 색"
    뇌졸중 width = "2"
  />
</svg>

CSS와 함께 :

 #Draw-Path {
  채우기 : 없음;
  뇌졸중 : 검은 색;
  뇌졸중 범위 : 2;
  뇌졸중-다셔 : 80;
  스트로크-산시 오프셋 : 80;
  애니메이션 : 1.5 초의 편의를 드러내십시오.
}

@keyframes draw {
  에게 {
    스트로크-산시 오프셋 : 0;
  }
}

최종 노트

• 이 기술은 <path></path> , <line></line> , <circle></circle> 등 - 스트로크가있는 요소에서만 작동합니다.
• 동일한 논리를 각각에 적용하여 여러 경로를 애니메이션 할 수 있습니다.
• 반응 형 SVG의 경우 크기 조정에서 경로 길이를 다시 계산해야 할 수도 있습니다.

기본적으로 그것은 마법이 아니라 대시와 오프셋을 현명하게 사용합니다. 길이가 올바르게되면 나머지는 매끄 럽습니다.

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