응답 형 CSS 모션 경로를 만듭니다. 물론 우리는 할 수 있습니다!

최근에, 작업 애니메이션 Slack 채널에 대한 토론은 반응 형 CSS 모션 경로를 만드는 흥미로운 도전을 촉발했습니다. 이 게시물은 복잡성을 탐구하고 JavaScript 기반 솔루션을 제공합니다.

offset-path 속성을 사용하는 CSS 모션 경로는 SVG 경로와 유사하게 정의 된 사용자 정의 경로를 따라 애니메이션 요소를 활성화합니다. 그러나 주요 제한은 경로 좌표가 픽셀 값으로 취급되어 응답을 방해한다는 것입니다. 특정 크기로 정의 된 경로는 뷰포트 변경으로 우아하게 확장되지 않습니다.

offset-distance 속성은 경로를 따라 요소의 위치를 ​​제어하는 ​​반면 offset-rotate 회전을 관리합니다. offset-distance 애니메이션하면 모션 효과가 발생합니다.

핵심 문제는 CSS 모션 경로의 고정 픽셀 특성에 있습니다. ViewBox와 함께 스케일링하는 SVG 경로와 달리 CSS 경로는 정적으로 유지되므로 다양한 뷰포트 크기에 대한 수동 조정이 필요합니다. 이것은 간단한 경로에 대해 관리 할 수 ​​있지만 복잡한 경로, 특히 벡터 편집기에서 가져온 경로는 유지하기가 어려워집니다. 크기 조정하려면 번거로운 프로세스 인 각 브레이크 포인트의 벡터 편집기에서 경로를 다시출해야합니다.

간단한 길을 고려하십시오.

 .요소 {
  -경로 : 'M20,20 C20,100 200,0 200,100';
  오프셋-경로 : 경로 (var (-경로));
}

이것을 스케일링하면 다른 중단 점에 대한 경로 좌표를 다시 계산해야합니다.

 @Media (min-width : 768px) {
  .요소 {
    -경로 : 'M40,40 C40,200 400,0 400,200'; // 수동 재 계산
  }
}

이것은 복잡한 경로로 기하 급수적으로 더 어려워집니다.

JavaScript 솔루션은보다 우아한 접근 방식을 제공합니다. Greensock의 MotionPath 플러그인과 같은 라이브러리는 SVG 경로에 대한 스케일링을 제공하지만 SVG 컨텍스트 외부의 경로에는보다 일반적인 솔루션이 필요합니다. 사용자 정의 함수는 경로를 동적으로 스케일 할 수 있지만 이는 사소한 것이 아닙니다.

차트 라이브러리 접근법

D3.JS와 같은 차트 라이브러리는 잠재적 인 솔루션을 제공합니다. 좌표 세트에서 경로 문자열을 생성하여 맞춤형 스케일링 및 곡선 조정을 가능하게합니다. 그러나 여전히 기존 경로를 좌표 세트로 변환해야합니다. 이는 이상적이지 않습니다.

더 나은 접근 방식은 벡터 편집기에서 경로 문자열을 직접 처리하는 것입니다. SVGOMG와 같은 도구를 사용하여 SVG를 최적화 한 후 경로 데이터 및 뷰 박스 정보를 추출합니다.

<svg height="300" viewbox="0 0 79.375 79.375" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544" fill="none" stroke="#000" stroke-width=".265"></path></svg>

우리는 d 속성 (Path String) 및 viewBox 속성에 관심이 있습니다.

향상된 JavaScript 솔루션

JavaScript 함수는 경로 문자열과 ViewBox 경계를 입력으로 사용합니다. SVGGeometryElement API를 사용하여 경로 문자열을 데이터 세트로 변환하여 경로의 길이를 반복하여 추출 지점입니다. 그런 다음 D3.js 스케일을 사용하여 컨테이너 크기와 뷰 박스 비율에 따라 스케일링 경로 문자열을 생성하는 데 사용됩니다. 이를 통해 경로는 컨테이너 내에서 비례 적으로 스케일링하면서 종횡비를 유지합니다. ResizeObserver 컨테이너가 크기가 커질 때마다 경로를 동적으로 업데이트합니다. 완전한 기능은 함께 제공되는 데모에서 사용할 수 있습니다.

이 접근법을 사용하면 다양한 중단 점에 대한 수동 재 계산없이 벡터 편집기의 경로를 직접 사용할 수 있으므로 반응 형 CSS 모션 경로를위한 강력하고 유지 관리 가능한 솔루션을 제공합니다. GitHub 패키지 인 "Inderer"는이 기능을 제공합니다. 데모는 솔루션을 선보이며 다양한 최적화 된 SVG 경로로 테스트 할 수 있습니다.

위 내용은 응답 형 CSS 모션 경로를 만듭니다. 물론 우리는 할 수 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!