제13장. Animation

Animation

동적 웹 : 시간에 따라 (벡터 그래픽스) 내용이 변한다.
방법
- SVG 애니메이션 요소 사용 : 예) Animate, animateMotion, ...
- SVG DOM 과 스크립트 이용
- SMIL 문서 내에서 SVG 객체를 애니메이션

SVG Animation Elements

SMIL 요소와 동일 또는 확장

<animate ... /> 시간축에 속성이나 특성의 수치 값을 할당
<set ... /> 비수치값을 가지는 속성 애니메이션
<animateMotion ... /> 패스에 따라 이동
<animateColor ... /> 색상 애니메이션
<animateTransform ... /> 변환 애니메이션

예제

<svg width="8cm" height="3cm" viewBox="0 0 800 300" >
<rect x="1" y="1" width="798" height="298"
             fill="none" stroke="blue" stroke-width="2" />

<rect id="RectElement" x="300" y="100" width="300"
      height="100"  fill="rgb(255,255,0)" >
  <animate attributeName="x" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="300" to="0" />
  <animate attributeName="y" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="100" to="0" />
  <animate attributeName="width" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="300" to="800" />
  <animate attributeName="height" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>

<g transform="translate(100,100)" >
  <text id="TextElement" x="0" y="0" font-family="Verdana"
          font-size="35.27" visibility="hidden" >
      It's alive!
    <set attributeName="visibility" attributeType="CSS"
        to="visible" begin="3s" dur="6s" fill="freeze" />
    <animateMotion path="M 0 0 L 100 100"
        begin="3s" dur="6s" fill="freeze" />
    <animateColor attributeName="fill"
        attributeType="CSS"
        from="rgb(0,0,255)" to="rgb(128,0,0)"
        begin="3s" dur="6s" fill="freeze" />
    <animateTransform attributeName="transform"
        attributeType="XML" type="rotate" from="-30" to="0"
        begin="3s" dur="6s" fill="freeze" />
    <animateTransform attributeName="transform"
        attributeType="XML" type="scale" from="1" to="3"
        additive="sum" begin="3s" dur="6s" fill="freeze" />
    </text>
  </g>
</svg>

애니메이션

시작 (0초)

중간(3초)

중간(6초)
종료(9초)

애니메이션 요소의 이름 속성
- attributeName : 애니메이션 하고자하는 속성의 이름
- attributeType = "CSS | XML | auto"

시간제어 속성

begin (시작시간), dur (지속시간), end (종료시간)
min, max, restart = (always | never | whenNotActive), repeatCount, repeatDur
fill = (remove | freeze) : 애니메이션 완료 후 속성값의 지속적인 존재 여부

값제어 속성
- from (시작 값), to (종료 값) by (변화량), values (변화값 리스트)
- calcMode = (discrete | linear | paced | spline), keyTimes, keySplines

애니메이션 상태 제어
- additive = (replace | sum), accumulate = (none | sum)

<animate ... />

수치값 속성 : from="..." to="..."

<rect ... >
<animate attributeName="opacity" attributeType="CSS"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>

<set ... />

비수치값 속성 : to="..."

<rect ... >
<set attributeName="visibility" attributeType="CSS"
to="visible" begin="3s" dur="6s" fill="freeze" />
</rect>

<animateColor ... />

fill 속성 : from="색상" to="색상"

<rect ... >
<animateColor attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze" />
</rect>

<animateTransform ... />

transform 속성 : type="변환" from="..." to="..."

<rect ... >
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze" />
</rect>

<animateMotion ... />

속성 :

path="..." rotate="각도 | auto | auto-reverse"
calcMode="discrete | linear | paced | spline"
keyPoints, keyTimes, keySplines, from, to

예제

<svg width="5cm" height="3cm" viewBox="0 0 500 300" >
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />
  <path d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
         fill="yellow" stroke="red" stroke-width="7.06" >
     <animateMotion dur="6s" repeatCount="indefinite"
         path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
  </path>
</svg>

예제 2)
    <animateMotion dur="6s" repeatCount="indefinite"
         path="M100,250 C 100,50 400,50 400,250" />

애니메이션 모드

alcMode="discrete | linear | paced | spline"
예)
keySplines="0 0 1 1" (default) keySplines=".5 0 .5 1" keySplines="0 .75 .25 1"

예제

<animateMotion dur="6s" repeatCount="indefinite" path="M100,250 C 100,50 400,50 400,250"
       rotate="auto" calcMode="spline" keySplines=".5 0 .5 1" />
<animateMotion dur="6s" repeatCount="indefinite" path="M100,250 C 100,50 400,50 400,250"
       rotate="auto" calcMode="spline" keySplines="0 .5 .5 1" />

시간제어

begin="시간" , end="시간"
- clock value (offset value)
  - 3.2h , 45min , 30s , 5ms , 12.467
  - 02:30:03 (2h 30min 3s) , 02:33 (2min 33s) , 00:10.5 (10s 500ms)
- event value :
  - 객체ID.이벤트 +/- 시간
  - begin = "load+3s" , end = "click + 5s"
  - begin = "xid.load" , begin = "xid.focus + 3s"
- syncbase value
  - begin = "end + 5s", end = "begin + 10s"
  - begin = "xid.begin + 3s", begin = "yid.end + 2s"

dur = "clock 시간 | indefinite | media"
restart = "always | never"
repeatCount = "횟수"
repeatDur = "시간"
fill = "freeze | remove"

예제

<svg width="5cm" height="3cm" viewBox="0 0 500 300" >
  <rect x="1" y="1" width="498" height="298" stroke="blue" ... />
  <path d="M100,250 C 100,50 400,50 400,250" stroke="blue" .../>
  <circle id="c1" cx="100" cy="250" r="17.64" fill="blue" />
  <circle id="c2" cx="250" cy="100" r="17.64" fill="blue" />
  <circle id="c3" cx="400" cy="250" r="17.64" fill="blue" />
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
          fill="yellow" stroke="red" stroke-width="7.06" >
    <animateMotion id="a1" begin="c1.click+2s" dur="6s"
        path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
    <animateMotion id="a2" begin="a1.end" dur="6s"
        path="M400,250 C 400,50 100,50 100,250" rotate="auto" />
</path>

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="cyan" stroke="red" stroke-width="7.06" >
    <animateMotion id="a3" begin="c2.click+1s" dur="6s"
        end="c3.click" path="M100,250 C 100,50 400,50 400,250"
        rotate="auto" calcMode="spline" keySplines=".5 0 .5 1" />
    <animateMotion id="a4" begin="a3.end" dur="6s"
        end="c3.click" rotate="auto-reverse"
        path="M400,250 C 400,50 100,50 100,250"
        calcMode="spline" keySplines=".5 0 .5 1" />
</path>
</svg>

값의 제어

from = "초기값"
to = "종료값"
by = "변화량"
values = "중간값 리스트"

예제

<svg width="5cm" height="4cm" viewBox="0 0 500 400">
<rect x="1" y="1" width="498" height="398"
        fill="none" stroke="blue" stroke-width="2" />
<circle id="c1" cx="70" cy="100" r="40" fill="red" >
    <animate attributeName="cx" attributeType="XML"
        begin="click" dur="5s" fill="freeze" to="400" />
</circle>
<circle id="c2" cx="70" cy="200" r="40" fill="green" >
    <animate attributeName="cx" attributeType="XML"
        begin="click" dur="5s" fill="freeze" to="400" by="50" />
</circle>
<circle id="c3" cx="70" cy="300" r="40" fill="blue" >
    <animate attributeName="cx" attributeType="XML"
        begin="click" dur="5s" fill="freeze"
        values="70; 150; 100; 300; 290; 400" />
</circle>
</svg>