SMIL을 이용한 SVG 애니메이션
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 <x> <y>" or "m <dx> <dy>"
Horizontal Line To commands => "H <x>" or "h <dx>"
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>
[결과]
간단히 움직임을 수행 했습니다. 더 추가로 예제를 실험를 방금 소개한 출처로 가셔서 코딩 따라 해보시면 됩니다.
마무리
오늘의 핵심은 효과를 부여 할 태그 안에 animate 태그를 통해 해당 태그의 속성 값에 변화를 줌으로써 애니메이션 효과를 부여하게 됩니다. 약간 문법 공부가 필요한 내용이긴 하지만 다양한 예제들을 따라 해보고 소스 분석을 통해 문법을 배우시면 될 듯 싶네요.
아무튼 여러분들도 오늘 소개한 것을 활용하면 시각적으로 좀 더 재밌는 표현을 하실 수 있을거라 생각 됩니다.
짱짱맨 호출에 응답하여 보팅하였습니다.
감사합니다.
animate 명령어를 적어 넣는것 만으로 !!! 신기할 따름의 세계!
꽤! 단순하고 강력하더군요. ^^
움직이는 물체를 프로그램으로 동작시킨다는 게 신기합니다.
여기에 물체 충돌을 부여하면 게임으로 바뀌게 되기 때문에 더 신기 하실 거에요.