국경 이미지로 SVG를 애니메이션하는 방법

CSS의 border-image 속성 및 애니메이션 SVG를 사용하여 동적 테두리 효과 생성

이 기사는 CSS와 애니메이션 SVG의 border-image 속성을 결합하여 테두리를 둘러싼 동적 SVG 애니메이션 효과를 만드는 방법을 소개합니다. 우리는이 효과를 재현 할 수있을뿐만 아니라 귀하의 요구에 따라 사용자 정의 할 수있는 손으로 만든 9 그리드 애니메이션 SVG를 수작업하는 방법을 배웁니다.

최종 효과는 다음과 같습니다.

이 애니메이션은 실제로 Arduino와 그 마이크로 컨트롤러의 내부 구조를 탐색하기 위해 "The Skull"이라는 깃발 테이킹 퍼즐의 일부입니다. 이와 같은 애니메이션 테두리를 만드는 방법을 검색했지만 유용한 예제를 찾을 수 없었습니다. 내가 찾은 컨텐츠의 대부분은 "개미 행진"효과와 관련이 있지만 불행히도 stroke-dasharray 트릭은 더 복잡한 모양은 물론 두개골과 함께 작동하지 않습니다.

그러므로 학습과 공유의 정신으로, 나는 여기에서 당신과 내 경험을 나눌 것입니다!

background 이나 border-image 사용해야합니까?

처음에는 border-image 속성의 존재를 알지 못했습니다. 첫 번째 시도에서, 나는 pseudo element ::before 사용하고 background-position 속성을 애니메이션하려고 노력했습니다. 결과는 다음과 같습니다.

보시다시피,이 방법은 작동하지만 전체 테두리를 완료하려면 적어도 8 개의 다른 요소 (또는 의사 요소)가 필요합니다. 이것은 HTML 코드를 혼동하며 이상적이지 않습니다.

나는 이스라엘 CSS 개발자 Facebook Group에 질문을 게시했으며 모든 사람들이 저에게 border-image 속성을 지적했습니다. 그것은 정확히 그것이 요소의 경계로 이미지 (또는 CSS 그라디언트)를 사용합니다.

border-image 사용하려면 9 그리드 방식으로 사용되는 이미지를 제공해야합니다 (이미지의 Tic Toe 그리드를 오버레이하는 상상). 이 9 개의 영역 각각은 국경의 다른 부분을 나타냅니다. 상단, 오른쪽, 왼쪽 및 하단, 네 모서리 및 중간 (중간 부분은 무시됩니다).

예를 들어, 정적 두개골 만 필요한 경우 SVG 패턴을 사용하여 두개골을 9 번 반복 할 수 있습니다. 먼저 두개골의 경로를 사용하여 24 × 24 패턴을 정의한 다음이 패턴을 72 × 72 사각형을 채우는 것으로 사용합니다.

<svg height="72" version="1.1" width="72" xmlns="http://www.w3.org/2000/svg"><defs><pattern height="24" patternunits="userSpaceOnUse" width="24"><path d="..." fill="red"></path></pattern></defs><rect fill="url(#skull-fill)" height="72" width="72"></rect></svg>

다음으로 테두리를 정의하고 대상 요소의 border-image 설정합니다.

 .skulls {
  국경 : 24px 고체 투명;
  Border-Image : URL ( "https://skullctf.com/images/skull-9.svg") 24 라운드;
}

이런 식으로 우리는 두개골로 구성된 국경을 얻습니다.

SVG 애니메이션을 추가하십시오

이제 우리는이 두개골에 애니메이션을 추가 할 수 있습니다! 대부분의 시간 동안 잘 작동합니다.

아이디어는 테두리 이미지에서 각 영역에 대해 다른 애니메이션을 만드는 것입니다. 예를 들어, 왼쪽 상단 모서리에는 하나의 두개골이 오른쪽에서 왼쪽으로 이동하고 다른 두개골은 동시에 위에서 아래로 이동합니다.

우리는 이동 효과를 달성하기 위해 transform 속성을 애니메이션 할 것입니다. 우리는 또한 SVG를 사용할 것입니다<use></use> 각 두개골에 대한 반복적 인 반복을 피하기위한 요소<path></path> 정의:

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @keyframes Left {to {transform : translate (-32px, 0)}}
  @keyframes how {to {transform : translate (0, 32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use></svg>

여기서 SVG 애니메이션 구문은 Smil과 같은 일종의 SVG 특정 구문이 아니지만 CSS 애니메이션을 사용하기 때문에 친숙해 보일 수 있습니다. 아주 멋져요?

최종 효과는 다음과 같습니다.

그리드를 추가하면이 애니메이션이 상단 및 왼쪽 가장자리의 일부를 다루고 있음을 알 수 있습니다.

나머지 3 개의 가장자리를 추가 한 후에는 더 인상적으로 보이므로 테두리 이미지의 8 개 영역을 완전히 덮습니다.

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @keyframes Left {to {transform : translate (-32px, 0)}}
  @keyframes how {to {transform : translate (0, 32px)}}
  @keyframes right {to {transform : translate (32px, 0)}}}
  @keyframes up {to {transform : translate (0, -32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="64" y="0"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="32"></use><use href="#skull" style="animation: down .4s infinite linear" x="0" y="32"></use><use href="#skull" style="animation: right .4s infinite linear" x="0" y="64"></use><use href="#skull" style="animation: right .4s infinite linear" x="32" y="64"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="64"></use></svg>

이것은 우리에게 완전한 루프를 제공합니다.

모든 것을 정리하고 우리는 방금 border-image 애니메이션 SVG를 사용하여 원하는 결과를 얻습니다.

하루 종일 연주 할 수있어 ...

처음 작동했을 때 애니메이션 속성을 조정하기 시작했습니다. 이것은 GIF 대신 SVG를 사용하는 것의 장점 중 하나입니다. 애니메이션의 특성을 변경하는 것은 SVG 소스 파일에서 CSS 속성을 변경하는 것만 큼 간단합니다. 더 작은 파일 크기 (특히 그라디언트를 다룰 때), 풀 컬러 지원 및 명확한 스케일링은 말할 것도없이 결과를 즉시 볼 수 있습니다.

먼저, 애니메이션 타이밍 기능을 ease 변경하면 어떻게 보이는지 보려고 노력합니다.

우리는 또한 빨간색과 녹색 사이의 두개골 페이드를 만들 수 있습니다.

높은 점수 테이블 주위를 움직일 때 두개골을 바꿀 수도 있습니다.

SVG 소스 코드를 조정하고 직접 시도 할 수있는 JavaScript 탭에 액세스 할 수 있습니다.

방에 코끼리 (Ahem, Firefox)

내가 처음 일하게되었을 때, 나는 너무 행복했다. 그러나주의를 기울여야 할 몇 가지가 있습니다. 가장 중요한 점은 어떤 이유로 든 Firefox는 테두리의 가장자리에 애니메이션을 렌더링하지 않고 코너의 애니메이션 만 다음과 같습니다.

흥미롭게도 SVG를 동일한 애니메이션으로 GIF로 변경하면 완벽하게 작동합니다. 그러나 Chrome Stop의 Edge Animations! ? ‍ ♂️

어쨌든, 이것은 Browser 오류 인 것 같습니다. Firefox는 우리가 테두리 이미지 반복 속성을 stretch 하기 위해 border-image-repeat 속성을 변경하면 가장자리에 애니메이션을 제공하지만 결과는 약간 이상합니다 (페이지의 주제에 맞을 수도 있지만).

border-image-repeat 값을 space 로 변경하는 것도 작동하는 것처럼 보이지만 요소의 너비가 두개골 크기의 정수 다중 (이 경우 32 픽셀)가 아닌 경우에만 애니메이션에 약간의 간격이 있음을 의미합니다.

또한 컨테이너 크기가 패치 크기의 배수가 아닌 경우 (이 경우 32 픽셀), 두개골에는 작은 검은 선과 같은 시각적 문제가 있음을 발견했습니다. 나는 이것이 일부 부동 소수점 반올림 문제와 관련이 있다고 생각합니다. 또한 확대되면 파손되는 경향이 있습니다.

완벽하지는 않지만 절대적으로 끝났습니다! 최종 버전을 보려면 "The Skull"의 높은 점수 페이지를 방문 할 수 있습니다. 바라건대 당신은 곧 당신의 이름을 볼 것입니다!

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