[D3.js] SMIL을 이용한 라인트레이서

모질라 개발 사이트 : 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

오늘은 "Introduction to SMIL animation in SVG"에 나와 있는 원리를 간단히 실험해 보는 내용으로 채웠네요.

1. 라인트레이서

출처 : Introduction to SMIL animation in SVG
http://srufaculty.sru.edu/david.dailey/svg/smil_svg.html

위 출처에 가시면 커브를 만드는 것과 커브에 따라 타원이 움직이는 코딩이 담겨져 있습니다. 저도 간단히 살펴보면서 배운 내용을 연습해 보았네요.

먼저 라인 커브를 만들어야 하는데 출처에 나온 소스에서 커브 값을 수정하여 다음과 같은 라인을 우선 만들었네요.
[커브 라인]

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px" style="background: yellow">  
  <path id="curve" stroke="black" fill="none" stroke-width="5"
 d="M 50,50 C 300,130 400,350 450,150 500,-50 -90,200 50,50" />
</svg>

켄버스(svg)의 폭은 500이고 높이는 300으로 잡고 배경색은 노란색으로 세팅 한 후 path 태그에 선색은 black으로 선두깨는 5로 그리고 선 경로는 d로 잡아 놓으면 아래와 같은 결과가 나옵니다.

[결과]

[타원 이동]

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#ff0000" stroke="#00ff00" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="2s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>

타원은 ellipse태그로 기본 속성 세팅을 해놓고 빨강색으로 채우고 테두리는 녹색으로 두깨는 2입니다. 불투명도는 0.9로 세팅이 됩니다.

이 타원을 커브 라인을 따라 움직이게 하기 위해서 animateMotion 태그로 해서 세팅이 이루어 집니다. 출처의 소스를 보닌 2초동안 회전은 자동이고 repeatCount은 무한 반복하도록 세팅을 합니다. 여기서 이동 경로는 mpath 태그로 커브 라인의 path 태그의 id curve을 위와 같이 코딩을 하면 끝납니다.

alt

2. 실험

내용 : 세개의 타원을 각기 다른 속도로 움직이도록 하는 실험을 합니다.

기본이 되는 커브 라인은 한번 지정해 놓고 이 커브 라인을 따라 타원을 움직이게 하면 됩니다. 그러면 ellipse 태그를 3개 만들고 각각 mpath 경로를 커브라인으로 잡아 놓으면 3개의 타원이 커브라인 위에서 움직이게 됩니다.

3개의 타원을 만들어서 움직이게 하려면 다음과 같이 세팅합니다.

빨간색타원 : 2초동안 움직임
녹색타원 : 3초동안 움직임
파란색타원 : 5초동안 움직임

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#ff0000" stroke="#00ff00" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="2s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#00ff00" stroke="#ff0000" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="3s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#0000ff" stroke="#ffff00" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="5s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>

종합해 보면,

[전체소스]

 <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px" style="background: yellow">  
<path id="curve" stroke="black" fill="none" stroke-width="5"
 d="M 50,50 C 300,130 400,350 450,150 500,-50 -90,200 50,50" />

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#ff0000" stroke="#00ff00" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="2s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#00ff00" stroke="#ff0000" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="3s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>

<ellipse cx="7" cy="-5" rx="20" ry="14" fill="#0000ff" stroke="#ffff00" 
 stroke-width="2" opacity="0.9">
 <animateMotion dur="5s" rotate="auto" repeatCount="indefinite" >
 <mpath xlink:href="#curve"/>
 </animateMotion>
</ellipse>
</svg>