lang/front

SVG animation SMIL

C/H 2019. 3. 26. 15:31

SMIL

개요

  • <animate> - 일정 기간 동안 스칼라 속성 및 속성을 애니메이션으로 만들 수 있습니다.
  • <set> - 애니메이트의 편리한 축약어로 비 숫자 속성 및 속성 (예 : visibility 속성)에 애니메이션 값을 할당 할 때 유용합니다.
  • <animateMotion> - 모션 경로를 따라 요소를 이동합니다.
  • <animateColor> - 시간이 지남에 따라 특정 속성이나 속성의 색상 값을 수정합니다. <animateColor> 요소는 단순하게 animate 요소를 사용하여 색상 값을 사용할 수있는 속성을 대상으로하기 때문에 더 이상 사용되지 않습니다. 아직 SVG 1.1 사양에 나와 있지만,이 기능은 더 이상 사용되지 않습니다. SVG 2 사양에서 완전히 제거되었습니다.

<animateMotion> 확장기능

  • <animateTransform> - 시간이 지남에 따라 SVG의 변형 속성 중 하나 (예 : 변형 속성)에 애니메이션을 적용 할 수 있습니다.
  • path (속성) - SVG의 경로 데이터 구문에서 모든 기능을 경로 속성에서 animateMotion 요소로 지정할 수 있습니다 (SMIL Animation은 경로 속성 내에서 SVG의 경로 데이터 구문의 하위 집합 만 허용). animateMotion 에 대한 자세한 내용은 다음 섹션에서 살펴 보겠습니다.
  • <mpath> - 모션의 경로로 사용될 모션 경로를 참조하기 위해 animateMotion 요소와 함께 사용됩니다. mpath 요소는 closing 태그 앞에 animateMotion 요소 안에 포함됩니다.
  • keypoints (특성) - animateMotion 의 특성으로 사용되어 모션 경로 애니메이션의 속도를 정밀하게 제어합니다.
  • rotate (속성) - animateMotion 의 속성으로 사용되어 객체가 자동으로 회전하여 x 축이 동작 패스의 방향 접선 벡터와 같은 방향 (또는 반대 방향)을 가리키는 지 제어합니다. 이 속성은 예상대로 경로 작업을 따라 동작을 만드는 데 핵심입니다. 자세한 내용은 animateMotion 섹션을 참조하십시오.

SVG 애니메이션은 본질적으로 CSS 애니메이션 및 전환과 유사 할 수 있습니다. 키 프레임이 생성되고, 움직이고, 색상이 바뀝니다.하지만 CSS 애니메이션이 할 수없는 일을 할 수 있습니다.

xlink:href 를 사용하여 애니메이션의 대상 지정

<rect id="cool_shape" ... /> <animate xlink:href="#cool_shape" ... />
xlink:href 대상 요소는 현재 SVG 문서 조각의 일부 여야합니다.
xlink:href 속성이 제공되지 않으면 대상 요소는 현재 애니메이션 요소의 직접적인 부모 요소가됩니다.
다른문서로 애니메이션을 분리하고 싶을 경우 xlink:href로 분리 가능.

attributeName 및 attributeType 을 사용하여 애니메이션의 대상 속성 지정합니다.

<circle> 중심의 위치를 ​​애니메이션으로 만들려면 attributeName 속성 값으로 cx를 지정하면됩니다.
<rect> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" /> </rect>
attributeName 은 값 목록이 아닌 하나의 값만 가져 오므로 한 번에 하나의 속성 만 애니메이션으로 만들 수 있습니다. 둘 이상의 애트리뷰트를 애니메이트하려면 요소에 둘 이상의 애니메이션을 정의해야합니다.

일정 시간 동안 요소의 속성을 한 값에서 다른 값으로 애니메이션하고 끝 상태를 지정하는 경우 from , by , to , dur 및 fill을 사용합니다.

  <svg width="500" height="100" style="background: #fff; border: 1px solid gray;">
    <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
    <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" />
  </svg>

fill 속성 (불행하게도 요소의 채우기 색상을 정의하는 fill 속성과 동일하게 이름 지정됨)은 요소가 animation-fill-mode 속성 뒤에있는 초기 상태로 돌아갈 지 여부를 지정하는 animation-fill-mode 속성과 비슷합니다. 애니메이션이 끝났습니다. SVG의 값은 다른 이름을 사용한다는 점을 제외하면 CSS의 값과 비슷합니다.

  • freeze : 애니메이션 효과는 활성 지속 기간의 마지막 값에서 효과 값을 고정 시키 도록 정의됩니다. 애니메이션 효과는 나머지 문서 기간 동안 (또는 애니메이션이 다시 시작될 때까지) "고정"됩니다.
  • remove : 애니메이션의 활성 기간이 끝나면 애니메이션 효과가 제거됩니다 (더 이상 적용되지 않음). 애니메이션의 활성 종료 후에는 애니메이션이 더 이상 대상에 영향을 미치지 않습니다 (애니메이션을 다시 시작하지 않는 한)

애니메이션 다시시작 restart

  • always : always 애니메이션을 다시 시작할 수 있습니다. 이것은 기본값입니다.
  • whenNotActive : 애니메이션이 활성화되지 않은 경우 (즉, 활성 끝 이후)에만 애니메이션을 다시 시작할 수 있습니다. 활성 기간 동안 애니메이션을 다시 시작하려는 시도는 무시됩니다.
  • never : 엘리먼트는 부모 시간 컨테이너의 현재 단순 기간의 나머지 시간 동안 재시작 될 수 없다. (SVG의 경우 부모 시간 컨테이너가 SVG 문서 조각이기 때문에 나머지 문서 기간 동안 애니메이션을 다시 시작할 수 없습니다.)

애니메이션 이름 지정 및 동기화

  <svg width="500" height="350" >
    <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
    <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
    <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="5s" begin="click" fill="freeze" id="circ-anim"/>
    <animate xlink:href="#blue-rectangle" attributeName="x" from="50" to="425" dur="5s" begin="circ-anim.begin + 1s" fill="freeze" id="rect-anim"/>
  </svg>
  
    
    
    
    
  
  
Click on the circle to animate it, and animate the rectangle after it.

반복 애니메이션 repeatCount

  <svg width="500" height="350" >
    <circle id="orange-circle2" r="30" cx="50" cy="50" fill="orange" />
    <rect id="blue-rectangle2" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
    <animate xlink:href="#orange-circle2" attributeName="cx" from="50" to="450" dur="5s" begin="click" repeatCount="2" fill="freeze" id="circ-anim2"/>
    <animate xlink:href="#blue-rectangle2" attributeName="x" from="50" to="425" dur="5s" begin="circ-anim2.begin + 1s" repeatCount="indefinite" fill="freeze" id="rect-anim2"/>
  </svg>

반복 시간 제한 repeatDur

반복 시간을 특정 기간으로 제한하고 문서의 시작 부분을 기준으로 어느 정도 시간이 지나면 반복을 중지하는 것이 좋습니다. 이를 프레젠테이션 시간이라고 합니다.
프레젠테이션 시간은 주어진 문서 조각의 문서 시작에 상대적인 타임 라인상의 위치를 나타냅니다. 

  <svg width="500" height="90" >
    <circle id="orange-circle3" r="30" cx="50" cy="50" fill="orange" />
    <animate xlink:href="#orange-circle3" attributeName="cx" from="50" to="450" dur="700ms" begin="0s" repeatCount="indefinite" repeatDur="00:05.5" fill="freeze" id="circ-anim3"/>
  </svg>

반복 횟수를 기반으로 애니메이션 동기화

  <svg width="500" height="350" >
    <circle id="orange-circle4" r="30" cx="50" cy="50" fill="orange" />
    <rect id="blue-rectangle4" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
    <animate xlink:href="#orange-circle4" attributeName="cx" from="50" to="450" dur="5s" begin="0s" repeatCount="2" fill="freeze" id="circ-anim4"/>
    <animate xlink:href="#blue-rectangle4" attributeName="x" from="50" to="425" dur="1s" begin="circ-anim4.repeat(2)" repeatCount="indefinite" fill="freeze" id="rect-anim4"/>
  </svg>
  
    
    
    
    
  
  

    circ-anim4.repeat(2) is not support

애니메이션 키 프레임 값 제어 : keyTimes 및 values

CSS에서는 애니메이션 도중 특정 프레임에서 애니메이션 속성을 취할 값을 지정할 수 있습니다. 예를 들어 요소의 왼쪽 오프셋에 애니메이션을 적용하는 경우 0에서 300까지 직접 애니메이션을 적용하는 대신 다음과 같이 특정 프레임에서 특정 값을 갖도록 애니메이션을 적용 할 수 있습니다.

키 프레임을 지정하려면 keyTimes 특성을 사용합니다. 그런 다음 각 프레임의 애니메이션 속성 값을 지정하려면 values 속성을 사용합니다. SMIL의 명명 규칙은 매우 편리합니다. 

  <svg width="500" height="100" >
    <circle id="orange-circle5" r="30" cx="50" cy="50" fill="orange" />
    <animate xlink:href="#orange-circle5" attributeName="cx" from="50" to="450" dur="1s" begin="click" values="50; 490; 350; 450" keyTimes="0; 0.5; 0.8; 1" fill="freeze" id="circ-anim5"/>
  </svg>
  
    
    
  
  
Click on the circle to start the animation.

커스텀 이징 : calcMode 및 keySplines 로 애니메이션 속도 조절하기

CSS에서는 기본 uniform animation pace를 변경하고 animation-timing-function 속성을 사용하여 animation-timing-function 을 제어하는 ​​사용자 정의 easing 함수를 지정할 animation-timing-function 있습니다. 타이밍 함수는 미리 정의 된 몇 가지 키워드 중 하나이거나 3 차 베 지어 함수 일 수 있습니다. 후자는 Lea Verou 의이 도구와 같은 도구를 사용하여 만들 수 있습니다.

SMIL에서 애니메이션 속도는 calcMode 속성을 사용하여 지정됩니다. 기본 애니메이션 페이스는 animateMotion 제외한 모든 애니메이션 요소에 대해 linear 입니다 (이 기사의 뒷부분에서 설명 할 것입니다). linear 값 외에도 discrete 값, paced 또는 spline 값을 설정할 수 있습니다.

  • discrete 는 애니메이션 함수가 보간없이 하나의 값에서 다음 값으로 점프하도록 지정합니다. 이것은 CSS의 steps() 함수와 유사합니다.
  • paced 는 linear 와 비슷하지만 keyTimes 정의한 중간 진행 시간은 무시한다는 점만 keyTimes . 후속 값 사이의 거리를 계산하고 그에 따라 시간을 나눕니다. 값이 모두 선형 순서 인 경우에는 그 차이를 알 수 없습니다. 그러나 그들이 앞뒤로 움직이거나 색상 (3 차원 벡터 값으로 취급되는)이라면 중개자의 값을 분명히 볼 수 있습니다. 다음은 지금까지 언급 한 세 가지 calcMode 값의 차이점을 보여주는 Amelia Bellamy-Royds의 라이브 데모입니다.
  • calcMode 허용되는 네 번째 값은 spline 입니다. 3 차 베 지어 스플라인으로 정의 된 시간 함수에 따라 values 목록의 한 값에서 다음 values 보간합니다. 스플라인의 점은 keyTimes 속성에 정의되며 각 간격의 조절 점은 keySplines 속성에 정의됩니다.
    
      
        
        
          
            
            
          
          linear
        
        
          
            
            
          
          paced
        
        
          
            
            
          
          discrete
        
      
    


    

    
      
      
    
    
Click on the circle to start the animation.

첨가제 및 누적 애니메이션 : additive 및 accumulate

때로는 이전 애니메이션이 끝난 곳에서 시작하는 애니메이션을 정의하는 것이 유용합니다. 또는 이전 애니메이션의 누적 합계를 값으로 사용하여 진행하십시오. 이를 위해 SVG에는 두 가지 편리한 속성 인 additive 와 accumulate 있습니다.
다른 애니메이션과 마찬가지로 from 및 to 값을 지정합니다. 그러나 additive 에 sum 을 설정하면 각 값은 애니메이션 속성의 원래 값에 상대적 입니다.
그래서, 다시 우리의 동그라미로. 우리 원형의 경우 cx 의 초기 위치는 50 from="0" to="100" 하면 실제로 원래 50이면 0, 100은 실제로 50 + 100입니다. 즉 " from="50" to="150" "과 같은 종류입니다. 

  <svg width="500" height="100" >
    <circle id="orange-circle8" r="30" cx="50" cy="50" fill="orange" />
    <animate xlink:href="#orange-circle8" attributeName="cx" from="0" to="100" additive="sum" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines=".42 0 1 1" dur="1s" begin="click" fill="freeze" />
  </svg>
  
    
    
  
  
Click on the circle to animate it.



  <svg width="500" height="100" >
    <circle id="orange-circle9" r="30" cx="50" cy="50" fill="orange" />
    <animate xlink:href="#orange-circle9" attributeName="cx" from="0" to="100" additive="sum" accumulate="sum" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines=".42 0 1 1" dur="1s" begin="click" fill="freeze" />
  </svg>
  
    
    
  
  
Click on the circle to animate it.

애니메이션 종료 시간 지정

  <svg width="500" height="180" >
    <circle id="orange-circle10" r="30" cx="50" cy="50" fill="orange" />
    <circle id="green-circle10" r="30" cx="50" cy="120" fill="#009966" />
    <animate xlink:href="#orange-circle10" attributeName="cx" from="50" to="450" dur="30s" begin="0s" end="gCircAnim.begin" fill="freeze" id="oCircAnim"/>
    <animate xlink:href="#green-circle10" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" id="gCircAnim"/>
  </svg>
  
    
    
    
    
  


  <svg width="500" height="100" >
    <circle id="orange-circle11" r="30" cx="50" cy="50" fill="#0099CC" />
    <animate xlink:href="#orange-circle11" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" id="move"/>
    <animate xlink:href="#orange-circle11" attributeName="fill" from="#0099CC" to="deepPink" dur="5s" repeatCount="indefinite" begin="0s" end="move.begin" fill="freeze" id="changeColor"/>
  </svg>

여러 이용한 애니메이션 간격 정의 begin및 end값

begin및 end속성 은 세미콜론으로 구분 된 값 목록을 허용 합니다. begin속성의 각 값은 속성의 값에 해당 end하므로 활성 및 비활성 애니메이션 간격을 형성합니다. 

  <svg width="500" height="150" >
    <style>
      rect {
        -moz-transform-origin: 75px 75px;
        transform-origin: 50% 50%;
      }
    </style>
    <rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" />
    <animateTransform xlink:href="#deepPink-rectangle" attributeName="transform" attributeType="XML" type="rotate" from="0 75 75" to="360 75 75" dur="2s" begin="0s; 5s; 9s; 17s; click;" end="2s; 8s; 15s; 25s;" fill="freeze" restart="whenNotActive" />
  </svg>

이용한 소자의 유효 기간을 제한 min하고max

애니메이션의 반복 시간을 제한 할 수있는 것처럼 애니메이션의 활성 기간 을 제한 할 수도 있습니다. min및 max속성은 각각 활성 기간의 최소값과 최대 값을 지정합니다. 그것들은 요소 활성 기간의 하한과 상한을 제어하는 ​​방법을 우리에게 제공합니다. 두 속성 모두 시계 값을 값으로 사용합니다.

  • min은 활성 시간의 최소값의 길이를 지정합니다 (요소 활성 시간에서 측정 됨). 값은 기본값 인 0보다 크거나 같아야하며 활성 기간을 전혀 제한하지 않습니다.
  • max는 클럭 값은 소자 활성 시간에서 측정 된 액티브 지속 시간의 최대 값의 길이를 지정한다. 값은 0보다 커야합니다.의 기본값 max은 indefinite입니다. 이것은 활성 기간을 전혀 제한하지 않습니다.
  • both는 min및 maxattributes가 지정된 경우 max값은 값보다 크거나 같아야 min합니다. 이 요구 사항이 충족되지 않으면 두 속성이 모두 무시됩니다.

활성기간 정의

처음에는 기초 활성 기간 계산 dur, repeatCount, repeatDur, 및 end값을. 그런 다음 ,이 규정에 대한 계산 된 기간 실행 min하고 max값을. 결과가 범위 내에 있으면이 첫번째 계산된 기간값은 정확하며 변경되지 않습니다. 그렇지 않으면 두 가지 상황이 발생할 수 있습니다.

  • 첫 번째 계산 된 기간이 값보다 크면 max요소의 활성 기간이 max값 과 같도록 정의됩니다.
  • 첫 번째 계산 된 기간이 min값 보다 작 으면 요소의 활성 기간이 min값과 같아지며 요소 의 동작은 다음과 같습니다.
    • 요소의 반복 지속 시간 (또는 요소가 반복되지 않는 경우 간단한 지속 시간)이 요소보다 많으면 min( min제한된) 활성 지속 기간 동안 정상적으로 재생됩니다 .
    • 그렇지 않으면 요소는 반복 기간 (또는 요소가 반복되지 않으면 단순 지속 시간) 동안 정상적으로 재생 된 다음 fill속성 값에 따라 고정되거나 표시되지 않습니다 .

<animate> 모핑 경로

SMIL에서 (그러나 CSS에서는) 움직일 수없는 속성 중 하나 는 SVG 의 d속성 ( 데이터의 약자 )입니다 . d속성은 그리고있는 모양의 윤곽을 정의하는 데이터를 포함합니다. 경로 데이터는 마지막 경로를 구성 하는 점, 호 및 선을 그리는 방법과 위치를 브라우저에 알려주는 명령 및 좌표 세트 로 구성됩니다 .

이 속성을 애니메이션화하면 SVG 경로 를 변형 하고 모양 트위닝 효과를 만들 수 있습니다. 그러나 도형을 변형 할 수 있으려면 시작, 끝 및 모든 중간 경로 모양에 정점 수 / 점 수가 정확히 같아야하며 같은 순서로 나타나야합니다. 정점 수가 일치하지 않으면 애니메이션이 작동하지 않습니다. 그 이유는 모양 변경이 실제로 정점을 이동하고 위치를 보간하여 발생하기 때문에 하나의 정점이 없거나 일치하지 않으면 경로가 더 이상 보간되지 않기 때문입니다.

임의 경로를 따라 애니메이션하기 : The <animateMotion>Element

  <svg width="500" height="350" viewBox="0 0 500 350" >
    <circle id="circle" r="20" cx="100" cy="100" fill="tomato" opacity="0.5" />
    <animateMotion xlink:href="#circle" dur="1s" begin="click" fill="freeze" path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
        c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
        c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
        c1.9-2.1,3.7-5.5,6.5-6.5" />
  </svg>
  
    
    
    
  
  
Click on the circle to animate it.

<mpath> 요소를 사용하여 동작 경로 지정

  
    
    
      
    
      
    
  
  
Click on the circle to animate it.

원이 경로의 동일한 모양을 따르지만 다른 위치에서 어떻게 움직이는 지 확인하십시오. 이것은 원의 위치가 경로 데이터의 값에 의해 변환된다는 사실 때문입니다.
다음은 위의 데모의 수정 된 버전입니다. 닫힌 경로를 사용하고 모션 애니메이션을 무기한 반복합니다.

무시 규칙 <animateMotion>

  <svg width="500" height="260" viewBox="0 40 500 260" >
    <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-13.8,0.1-33.3,0.4-44.8,9.2 c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4 c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-34.9-10.3-46.5 c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-8.1-8.3-13.2-11 c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-18.6-1.5 C222.5,59,212.5,57.8,202.4,58.3"/>
    
    <g id="car" transform="translate(-234.4, -182.8)">
      <path d="M234.4,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C240.8,185.6,238,182.8,234.4,182.8z"/>
      <circle cx="234.4" cy="189.2" r="2.8"/>
      <path d="M263,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C269.4,185.6,266.6,182.8,263,182.8z"/>
      <circle cx="263" cy="189.2" r="2.8"/>
      <path d="M275,171.4c-2.8-0.7-5.2-3-6.3-5.1l-3.9-7.4c-1.1-2.1-3.9-3.8-6.3-3.8h-22.6c-2.4,0-5,1.8-5.7,4.1l-2.4,7 c-0.2,0.9-1.8,5.5-5,5.5c-2.4,0-5,3.1-5,5.5v8.2c0,2.4,1.9,4.3,4.3,4.3h4.5c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-7.8 c4.3,0,7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h13.1c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h8.1 c2.4,0,4.3-1.9,4.3-4.3v-6.5C283.2,172,277.3,172,275,171.4z"/>
      <path d="M241.8,170.3h-12.5c0.7-1.1,1.1-2.2,1.2-2.6l2-5.9c0.6-1.9,2.8-3.5,4.8-3.5h4.5V170.3z"/>
      <path d="M246.1,170.3v-12h10.4c2,0,4.4,1.5,5.3,3.3l3.3,6.3c0.4,0.8,1.1,1.7,2,2.4H246.1z"/>
    </g>
      
    <animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" >
      <mpath xlink:href="#motionPath" />
    </animateMotion>
  </svg>

rotate

  • auto : 오브젝트가 모션 경로의 방향 (즉, 방향 접선 벡터)의 각도만큼 시간 경과에 따라 회전 함을 나타냅니다.
  • auto-reverse : 모션 경로의 방향 (즉, 방향 접선 벡터)에 180도 더한 각도만큼 오브젝트가 시간 경과에 따라 회전 함을 나타냅니다.
  • a 숫자 : 대상 요소에 회전 변환이 적용됨을 나타냅니다. 여기서 회전 각도는 지정된 각도입니다.

  <animateMotion xlink:href="#car2" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto">
      ...
  </animateMotion>
  
    
    
    
      
      
      
      
      
      
      
    
      
    
      
    
  

  <animateMotion xlink:href="#car3" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto-reverse">
    ...
  </animateMotion>

차가 길을 따라 뒤로 움직이고있는 것처럼 그것은 본다! 이를 바꾸려면 y 축을 따라 자동차를 뒤집어 야합니다. 이 축을 따라 "-1"인수로 축척하면됩니다. ID g와 함께 변환을 적용 car하면 차가 예상대로 앞으로 이동합니다. 

    <g id="car4" transform="scale (-1, 1) translate(-234.4, -182.8)">
      ...
    </g>
      
    <animateMotion xlink:href="#car4" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto-reverse">
      ...
    </animateMotion>

모션 경로를 따라 애니메이션 거리 조절하기 keyPoints

이 keyPoints속성은 keyTimes지정된 값 각각에 대해 동작 경로를 따라 진행률을 지정할 수있는 기능을 제공 합니다. 지정된 경우, keyPoints발생 keyTimes의 값에 적용하는 keyPoints대신에 지정된 포인트보다 values특성 어레이 또는 점의 path속성.

keyPoints는 0과 1 사이의 세미콜론으로 구분 된 부동 소수점 값 목록을 취해 객체가 해당 keyTimes값 으로 지정된 시간에 이동할 동작 경로의 길이를 나타냅니다 . 거리 계산은 브라우저의 알고리즘에 의해 결정됩니다. 목록의 각 진행 값은 keyTimes속성 목록 의 값에 해당 합니다. 목록이 경우 keyPoints지정되면, 정확히 같은 많은 값이 있어야합니다 keyPoints에서와 같이 목록 keyTimes목록입니다.

여기에서 유의해야 할 중요한 점은 to calcMode값을 linearfor keyPoints로 설정하는 것입니다. 키 포인트가 앞뒤로 움직이는 경우에도 페이징 된 애니메이션으로 논리적으로 작동 해야하는 것처럼 보입니다 . 

  
    
      
        
        S
      
    
    
    
      
        
      
      
        
      
    
    Animating motion on a closed path, starting from an arbitrary point partway along the path.

임의 경로를 따라 텍스트 이동

임의의 경로를 따라 텍스트를 이동하는 것은 경로를 따라 다른 SVG 요소를 이동하는 것과 다릅니다. 텍스트에 애니메이션을 적용하려면 <animate>요소가 아닌 <animateMotion>요소를 사용해야합니다.

먼저 경로를 따라 텍스트를 배치하는 것으로 시작해 보겠습니다. 이는 &tl;textPath>요소 내부에 <text>요소를 중첩하여 수행 할 수 있습니다. 경로를 따라 배치될 텍스트는 <textPath>요소의 자식이 아닌 <text>요소 내부에서 정의됩니다. 

  <svg width="500" height="150" viewBox="0 0 500 150" >
    <path id="myPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,34.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 c1.9-2.1,3.7-5.5,6.5-6.5"/>
    <text style="fill:deepPink; font-size: 2em;">
      <textpath xlink:href="#myPath">
        Text laid out along a path.
      </textpath>
    </text>
  </svg>
  
    
    
      
        Text laid out along a path.

해당 경로를 따라 텍스트를 애니메이션화하려면이 <animate>요소를 사용하여 startOffset속성 을 애니메이션으로 만듭니다. 

  <svg width="500" height="150" viewBox="0 0 500 150" >
    <path id="myPath2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,34.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 c1.9-2.1,3.7-5.5,6.5-6.5"/>
    <text>
      <textpath xlink:href="#myPath2" style="fill:deepPink; font-size: 2em;">
        Text laid out along a path.
        <animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="5s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0.1 0.2 .22 1"/>
      </textpath>
    </text>
  </svg>
  
    
    
      
        Text laid out along a path.

변형 애니메이션 : <animateTransform>요소

이 <animateTransform>요소는 대상 요소에서 변형 속성을 애니메이션화하므로 애니메이션에서 이동, 크기 조정, 회전 및/또는 비뚤어짐을 제어할 수 있습니다. <animate>요소에 대해 언급된 것과 동일한 속성과 추가속성을 가집니다.

이 속성은 애니메이션으로 변환되는 유형을 지정하는데 사용됩니다. 그것은 다섯가지 값 중 하나를 취힌다. translate, scale, rotate, skewX,와 skewY. 

  <svg width="500" height="150" >
    <style>
      rect {
        -moz-transform-origin: 75px 75px;
        transform-origin: 50% 50%;
      }
    </style>
    <rect id="deepPink-rectangle2" width="50" height="50" x="50" y="50" fill="deepPink"  transform="rotate(0) translate(0 0)"/>
    <animateTransform xlink:href="#deepPink-rectangle2" attributeName="transform" attributeType="XML" type="rotate" from="0 75 75" to="360 75 75" dur="2s" begin="0s" repeatCount="indefinite" fill="freeze" />
  </svg>

animateTransform가브리엘 (Gabriel) 의 단 하나의 재미있는 예가 있습니다 .

하나의 변형을 애니메이션으로 만드는 것은 간단합니다. 그러나 여러 변형이 포함되어있을 때, 특히 animateTransform다른 애니메이션을 오버라이드 할 수 있기 때문에 복잡하고 복잡해질 수 있습니다. 따라서 효과를 추가하고 연결하는 대신 완전히 반대가 될수 있습니다.
즉, SVG 좌표계와 변환이 실제로 작동하는 방식 외에도 예제는 방대하고이 기사의 범위를 벗어난다.
SVG를 변환하려면 CSS 변환을 사용하는 것이 좋습니다. 구현은 SVG에서 완벽하게 동작하도록 구현하고 있으므로 SVG에서 애니메이션 변환에 SMIL을 사용하지 않아도됩니다.

<set> 요소

지정된 기간 동안 속성의 값을 설정하는 간단한 방법을 제공합니다.
문자열과 부울값과 같이 합리적으로 보간 할수 없는 속성유형을 포함하여 모든 속성 유형을 지원합니다.
set요소는 무첨가이다.
additive 및 accumulate 속성은 허용되지 않으며 지정된 경우 무시됩니다.

set 타겟팅하는 요소의 속성 이름과 종류를 지정할 수 있습니다.
to, begin, dur, end, min, max, restart, repeatCount, repeatDur,와 fill 값을 지정하고, 애니메이션 타이밍을 제어 할 수 있습니다.

사각형을 클릭 할 때마다 set애니메이션이 실행되고 set.dur값 동안 색상이 변경됩니다.

움직일 수있는 요소, 속성 및 속성

모든 SVG 속성이 애니메이션 될 수있는 것은 아니며 모든 애니메이션 요소를 사용하여 애니메이션 될 수있는 모든 SVG 속성을 애니메이션화 할 수있는 것은 아닙니다. 모든 애니메이션 가능한 속성의 전체 목록과 해당 요소 중 어떤 요소가 어떤 요소에 의해 애니메이션 될 수 있는지를 보여주는 표 는 SVG Animation 사양섹션을 참조하십시오.

반응형

'lang > front' 카테고리의 다른 글

SVG transform Example  (0) 2019.03.28
Transforms on SVG Elements - SVG 요소 변환  (0) 2019.03.27
scroll down fadein . element on jquery  (0) 2019.03.21
이미지 최적화.... 뭐가 이래 복잡해..  (0) 2018.08.16
Summernote WISWIG Editor  (0) 2018.07.12

'lang/front'의 다른글

  • 현재글SVG animation SMIL

관련글

댓글

티스토리툴바