SMIL을 이용한 SVG 애니메이션

모질라 개발 사이트 : SVG_animation_with_SMIL#Animation_following_a_path
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL#Animation_following_a_path
SVG-SMIL animation tutorial : http://edutechwiki.unige.ch/en/SVG-SMIL_animation_tutorial
SMIL 3.0 Animation : https://www.w3.org/TR/REC-smil/smil-animation.html
예제 : SVG animation with SMIL https://codepen.io/collection/chefj/
추천 : Introduction to SMIL animation in SVG http://srufaculty.sru.edu/david.dailey/svg/smil_svg.html

D3.js 애니메이션 효과를 지난주에 길게 post를 했습니다. 애니메이션 주제로 이야기를 쓰다보니 D3.js가 아니 일반 애니메이션 표현에 대해서 알아보면 좋을 것 같아서 찾아보니 모질라 개발 사이트에서 괜찮은 내용이 있어서 간단히 소개 수준으로 이야기 하겠습니다.

1. SMIL을 이용한 SVG 기본 틀

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px">  
<태그>
<animate 속성 />
</태그>
</svg>

위와 같은 코딩으로 특정 태그에 대한 animate 효과를 부여 할 수 있습니다.

예)

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px">  
  <rect x="100" y="100" width="100" height="100" style="fill:#ff00ff;stroke:#0000ff">
   <animate attributeName="width"  from="10px"  to="100px" 
            begin="0s" dur="3s" repeatCount="indefinite"/>
   <animate attributeName="height" from="100px" to="10px"
            begin="0s" dur="3s" repeatCount="indefinite"/>
  </rect>
</svg>

[결과]

2. animate 기초 이해

   <animate attributeName="width"  from="10px"  to="100px" 
            begin="0s" dur="3s" repeatCount="indefinite"/>

위 예제를 통해 animate 효과를 부여한 코딩입니다. 이 코딩으로 간단히 살펴보면 attributeName이 있는데 보시면 태그의 속성이 width를 10에서 100으로 변화하는데 시작 시간은 0s이고 3초동안 변화시키라는 명령입니다. 그리고 repeateCount로 반복적으로 수행하도록 값을 지정 했네요.

다시 살펴보면,

  <rect x="100" y="100" width="100" height="100" style="fill:#ff00ff;stroke:#0000ff">
   <animate attributeName="width"  from="10px"  to="100px" 
            begin="0s" dur="3s" repeatCount="indefinite"/>
   <animate attributeName="height" from="100px" to="10px"
            begin="0s" dur="3s" repeatCount="indefinite"/>
  </rect>

0~3초 동안은 width의 값을 10에서 100으로 크기로 변화 시키는데 height은 100에서 3초에서 6초동안은 height의 값을 100에서 10으로 크기를 변화 시키는 과정은 반복하는 animate 코딩입니다.

예) path로 이동 경로로 움직이 제어

출처 : https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL#Animation_following_a_path

Move To commands => "M  " or "m  "
Horizontal Line To commands => "H " or "h "
Closepath commands => "Z" or "z"

위 코딩을 기준으로 예제입니다.

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" style="background: yellow">  
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion
       path="M 0 0 H 300 Z"
       dur="3s" repeatCount="indefinite" />
  </circle>
</svg>