SVG <Animation> 애니메이션 요소

SVG <Animation> 애니메이션 요소는 SVG 그래픽에 애니메이션을 만드는 데 사용됩니다. 애니메이션 요소는 원래 동기 멀티미디어 통합 언어(SMIL)에서 정의되었습니다. 애니메이션에서는 속성, 움직임, 색상, 애니메이션 시작 시간 및 애니메이션 지속 시간의 시작과 종료 값을 지정해야 합니다.

SVG 이미지 내의 형상에 애니메이션을 처리할 수 있습니다. 다양한 방법으로 SVG 형상에 애니메이션을 추가할 수 있습니다. 이 기사에서는 여러 가지 가능성을 소개하겠습니다.

SVG 애니메이션 예제

이것은 간단한 SVG 애니메이션 예제입니다：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10" height="110"　width="110"
　　　　　　　　　style="stroke:#ff0000; fill: #0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0　60　60"
　　　　　　　　　　　　to="360　60　60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

Attention<rect> 요소가 <animateTransform> 요소 내부에 어떻게 들여박혀 있는지 주의하세요. 바로 이 요소가 사각형을 애니메이션화합니다.

이렇게 생성된 SVG 애니메이션입니다：

애니메이션 옵션 개요

시간에 따라 형상의 속성을 조작하여 애니메이션을 만듭니다. 이를 위해 사용합니다}}5SVG 애니메이션 요소 중 하나나 여러 개가 이 작업을 완료합니다:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

이 SVG 애니메이션 요소는 각각 SVG 형상의 다른 면에 애니메이션을 설정합니다. 이 애니메이션 요소는 본문의 나머지 부분에서 설명됩니다.

set

이 set 요소는 SVG 애니메이션 요소 가장 간단한 요소입니다. 특정 시간 간격 후에 그저 속성을 특정 값으로 설정하는 것뿐입니다. 따라서 형상은 연속적으로 애니메이션을 처리하지 않고 단일 번째 속성 값을 변경합니다.

이는 <set> 요소 예제입니다:

<svg　width="500" height="100"><circle　cx="30"　cy="30"　r="25"　style="선: 없음; 채우기: #0000ff;"
　　　　<set　attributeName="r"　attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

주의할 점은 <set> 요소가 circle 요소 내부에 들어 있음입니다. 이는 <set> 요소를 형상에 적용하는 방법입니다-애니메이션을 설정하려면 적용할 형상의 SVG 요소 내에 그를 삽입합니다.

<set> 요소는 특정 시간에 속성 값을 설정합니다. 설정할 속성 이름은 attributeName 속성에 지정됩니다. 설정할 값은 to 속성에 지정됩니다. 속성 값을 설정할 시간은 begin 속성에 지정됩니다.

위의 예제에서 r 값은5초 후 속성을 설정합니다100. 실행 후 이미지 효과:

attributeType

위의 예제에서 <set> 요소에도 attributeType 속성이 있습니다. 이 값은 XML로 설정되었습니다. 이는 예제에서 값을 설정하려는 속성(r 속성)이 SVG Circle 요소의 속성인 것 때문입니다. SVG 요소가 XML 요소이므로 SVG 속성도 XML 속성입니다.

형상의 CSS 속성의 애니메이션을 설정할 수도 있습니다. 이렇게 하면 attributeType을 CSS로 설정해야 합니다. attributeType 속성을 제공하지 않으면 브라우저가 애니메이션을 만들기 위해 설정할 속성이 XML 속성인지 CSS 속성인지 추측합니다.

animate

animate 요소는 SVG 형상의 속성에 애니메이션을 설정하는 데 사용됩니다. 애니메이션을 설정하려면 애니메이션을 형상 내에 삽입할 수 있습니다. 이는 예제입니다:

<svg　width="500" height="100"><circle　cx="30"　cy="30"　r="25"　style="선: 없음; 채우기: #0000ff;"
　　　　<animate　attributeName="cx"　attributeType="XML"
　　　　　　　　　　　　　from="30"　　to="470"
　　　　　　　　　　　　　begin="0s"　dur="5s"
　　　　　　　　　　　　　fill="제거" repeatCount="무한"/>
</circle></svg>

이 예제는 <circle> 요소의 cx 속성을 값3초(“from” 속성)으로 설정된 값479의 "to" 속성의 애니메이션. 애니메이션은 0초에서 시작(“begin” 속성)하고, 지속 시간은5초(“dur” 속성).

애니메이션이 완료되면, 애니메이션 속성은 원래 값으로 설정됩니다(fill=“remove” 속성 설정). 애니메이션 속성을 애니메이션의 "to" 값으로 유지하고 싶다면-value에 대해 "fill" 속성을 "freeze"로 설정하십시오. 애니메이션은 무한히 반복됩니다("repeatCount" 속성).

이렇게 생성된 애니메이션은 다음과 같습니다:

animateTransform

<AnimateTransform> 요소는 형상의 Transform 속성에 애니메이션을 설정할 수 있습니다. <Animate> 요소는 이를 할 수 없습니다.

이는 예제입니다:

<svg　width="500" height="100"><rect x="20" y="20" width="100"　height="40"
　　　　style="stroke: #ff00ff; fill:none;">
　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　from="0　100　100"　to="360　100　100"
　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　/>
</rect></svg>

이 <animateTransform> 예제는 transform 안에 포함된 <rect> 요소의 속성을 애니메이션 처리합니다. type 속성은 rotate(회전 변환 기능)으로 설정되어 있으며, 이는 애니메이션 변환은 회전이 될 것을 의미합니다. from과 to 속성이 설정된 매개변수를 애니메이션에 설정하고, rotate 함수에 전달합니다. 이 예제는 다음 점을 중심으로 회전합니다:100,100도에서 0도로 회전하십시오360도.

이는 정사각형의 비율 애니메이션을 만드는 예제입니다:

<svg　width="500"　height="200">
　　　　<rect　x="20" y="20" width="40"　height="40"
　　　　　　　　　　style="stroke: #ff00ff; fill: none;">
　　　　　　　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1　1"　to="2　3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateTransform>
　　　　</rect>
</svg>

다시 한 번 주의하지만, from과 to 속성은 scale() 변환 함수에 전달되는 일반적인 값으로 포함됩니다.

이렇게 생성된 애니메이션은 다음과 같습니다:

animateMotion(동작 운동)

<animateMotion> 요소는 경로 애니메이션의 형상의 운동을 따릅니다. 그것은 또한 형상을 경로의 기울기를 맞추기 위해 회전시킬 수 있습니다. 산 위에서 달리는 차처럼. 예제를 보면 다음과 같습니다:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke: #000000; fill: none;"
　　　　　　　　　　　　></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

path는 <animateMotion> 요소의 속성에서 사각형 애니메이션의 경로를 지정합니다. path 속성은path 요소같은 문법입니다.

이는 경로 결과 애니메이션을 표시하는 것이기 때문에 운동을 더 잘 따를 수 있습니다.

정사각형을 경로의 기울기를 맞추기 위해 회전하려면, <animateMotion> 요소의 rotate 속성을 auto로 설정하십시오. 예제를 보면 다음과 같습니다:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

이렇게 생성된 애니메이션입니다. 사각형의 회전이 경로에 맞춰 변하는 것을 주목해 주세요.

당신은 rotate 속성을 특정 값으로 설정할 수도 있습니다. 예를 들어20 또는30 등. 이렇게 하면 전체 애니메이션에서 형상을 이 각도로 회전할 수 있습니다.

시간 단위

SVG 애니메이션을 정의할 때, 애니메이션의 시작 시간과 지속 시간을 지정할 수 있습니다. 지정할 때, 다른 시간 단위 중에서 선택할 수 있습니다.의 시간 단위 내에서는 보통 begin, dur, end와 같은 여러 애니메이션 요소의 속성을 지정합니다.

이러한 속성들에서는, 본문 예제와 같이 숫자와 시간 단위를 따르는 것을 지정할 수 있습니다. 예를 들어5s5초. 사용할 수 있는 시간 단위 목록은 다음과 같습니다:

당신은 시간을 시간, 분, 초를 포함한 형식으로 지정할 수도 있습니다. 형식은 다음과 같습니다:

hh:mm:ss

이는 예제입니다:

1:30:45

이 예제에서 지정한 것은1시간30분45초의 시간(애니메이션의 경우 이는 당연히 매우 긴 시간입니다).

동기화 애니메이션

당신은 한 애니메이션의 시작을 다른 애니메이션의 끝에 동기화할 수 있습니다. 이렇게 합니다:

<svg　width="500"　height="100">
<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　<animate　id="one"　attributeName="x"　attributeType="XML"
　　　　　　　　　　　　　from="0"　to="400"
　　　　　　　　　　　　　begin="0s"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
　　　　<animate　attributeName="y"　attributeType="XML"
　　　　　　　　　　　　from="0"　to="50"　begin="one.end"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
</rect>
　　　　</svg>

이렇게 생성된 애니메이션은 다음과 같습니다:

첫 번째 애니메이션의 id 속성은 one으로 설정되었습니다.

두 번째 애니메이션은 begin 속성을 통해 첫 번째 애니메이션을 참조합니다. 이 begin 속성 값이 one.end로 설정되면, 이 애니메이션이 ID one의 애니메이션이 끝나면 시작된다는 의미입니다.

다른 애니메이션이 시작하거나 끝나면, id.begin 또는 id.end을 사용하여 애니메이션을 시작할 수 있습니다. 대신 id를 사용하여 애니메이션 요소의 ID를 동기화할 수 있습니다.

당신은 다른 애니메이션의 시작 또는 끝 시간의 오프셋을 지정할 수 있습니다. 예를 들어:

one.begin+10s
one.end+5s

또한, 애니메이션 end 속성 내에서 명확한 종료 시간을 지정할 수 있습니다. 이는 dur 속성을 대체하지 않습니다. 이는 애니메이션에 추가된 또 다른 가능한 종료 시간으로 작동하며, 이는 먼저 발생한 것이 우선합니다. 예제는 다음과 같습니다:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"　end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

이 애니메이션의 지속 시간은10초, 또는 ID 'one'이 끝나는 애니메이션의 끝에서 중지합니다. 중지되는 것은 먼저 도달한 것이 우선합니다.

반복 애니메이션

애니메이션 요소 내에서 두 개의 속성을 사용하여 애니메이션을 반복할 수 있습니다.

첫 번째 속성은 repeatCount 속성입니다. 이 속성 내에서는 숫자를 설정하여 애니메이션을 반복 재생할 횟수를 설정할 수 있으며, 또한 indefinite 값을 설정하여 애니메이션을 중지하지 않고 계속 실행할 수 있습니다.

두 번째 속성은 repeatDur입니다. 이 속성 내에서는 애니메이션을 반복 재생할 수 있는 시간을 지정할 수 있습니다. 또한 repeatDur 속성 내에서 indefinite 값을 사용할 수도 있으며, 이는 repeatCount 속성 내에서 사용하는 값과 같은 효과를 줍니다.

이 두 개의 예제는 다음과 같습니다:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

조합 애니메이션

《animation》를 사용하여 요소 내에서 여러 개의 애니메이션을 나열하여 애니메이션을 조합할 수 있습니다. 이미 보았듯이, 다른 예제는 다음과 같습니다:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="10"　y="10"　width="40"　height="20"
　　　　　style="stroke:　#000000;　fill:　none;">
　　　<animate　attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="400"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
　　　<animate　attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="100"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
</rect>
</svg>

이 예제에서는 두 개의 애니메이션이 있으며, 각 애니메이션은 사각형의 x와 y 속성에 애니메이션을 설정합니다. 생성된 애니메이션은 다음과 같습니다:

《animateTransform》요소를 조합할 때, 기본 동작은 두 번째 애니메이션이 첫 번째 애니메이션을 취소합니다. 그러나 두 개의 《animateTransform》요소에 additive와 sum 값을 추가하여 변환 애니메이션을 조합할 수 있습니다. 이는 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect　x="10"　y="10"　width="40"　height="20"
　　　　　　style="stroke:　#000000;　fill:　none;">
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1"　to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　></animateTransform>
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0　30　20"　to="360　30　20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"　additive="sum"
　　　　　　　　　　　　></animateTransform>
</svg>

이것은 확대와 회전 사각형의 결과 애니메이션입니다: