제13장. Animation

SVG Animation 기본

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

• [참고]SMIL 요소에서 확장 사양
• <animateTransform ... /> 요소 추가
• <animateMotion ... /> 에서 path, mpath, keypoints, rotate 속성 추가

• Animation 의 개념
• 어떤 객체가 어떻게 변화 => 무엇을, 얼마만큼, 언제 : attribute, from/to, begin/dur
• <animate
          attributeName="속성이름"  attributeType="속성유형(XML | CSS | auto)"
          from="시작값"  to="종료값"
          begin="시작시간" dur="지속시간"  fill="freeze | remove">

• 예제

<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초)

Animation의 주요 속성

• 애니메이션 요소의 이름 속성
• attributeName : 애니메이션 하고자하는 속성의 이름
• attributeType = "CSS | XML | auto"
• CSS : CSS 스펙에 정의된 속성, 예) fill, visibility, ...
• XML : XML namespace로 정의된 속성, 예) x, y, width, height, transform, ...
• auto : 속성의 타입을 먼저 CSS에서 찾고 없으면 XML에서 찾는다.
예제

<rect x="10" y="10" width="200" height="20"         style="stroke: black; fill: yellow;">    <animate  attributeName="width" attributeType="XML"         from="200" to="20"         begin="0s" dur="5s"  fill="freeze" /> </rect>

<rect x="20" y="20" width="40" height="40"       style="stroke: black; fill: green; fill-opacity: 0.25;">   <animate attributeName="width" attributeType="XML"       from="20" to="250" begin="0s" dur="8s" fill="freeze" />   <animate attributeName="height" attributeType="XML"       from="20" to="200" begin="0s" dur="8s" fill="freeze"/>   <animate attributeName="fill-opacity" attributeType="CSS"        from="0.25" to="1" begin="0s" dur="3s" fill="freeze"/>   <animate attributeName="fill-opacity" attributeType="CSS"        from="1" to="0.25" begin="3s" dur="3s" fill="freeze"/> </rect>

• 시간제어 속성
• begin="시간" , end="시간" 
• dur = "clock 시간 | indefinite | media"
• restart = "always | never"
• repeatCount = "횟수"
• repeatDur = "시간"
• fill = "freeze | remove" : 애니메이션 완료 후 속성값의 지속적인 존재 여부

• 시간 값의 표현방식
• 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 : 객체ID.begin/end ± 시간
  • begin = "end + 5s", end = "begin + 10s"
  • begin = "xid.begin + 3s", begin = "yid.end + 2s"

예제

<circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;">     <animate id="c1" attributeName="r" attributeType="XML"         begin="click+0s" dur="2s" from="30" to="10" fill="freeze"/>     <animate attributeName="r" attributeType="XML"         begin="c2.begin+1s" dur="2s" from="10" to="30" ... /> </circle> <circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;">     <animate attributeName="r" attributeType="XML"         begin="c1.end" dur="2s" from="10" to="30" fill="freeze"/>     <animate id="c2" attributeName="r" attributeType="XML"         begin="click" dur="2s" from="30" to="10" fill="freeze"/> </circle>
<circle cx="60" cy="60" r="30" style="fill: #fdd; stroke: red;">     <animate attributeName="cx" attributeType="XML"         begin="0s" dur="3s" repeatCount="2"         from="60" to="260" fill="freeze"/> </circle> <circle cx="260" cy="130" r="30" style="fill: #ccf; stroke: black;">     <animate attributeName="cx" attributeType="XML"         begin="0s" dur="3s" repeatDur="5s"         from="260" to="60" fill="freeze"/> </circle>
<circle cx="60" cy="60" r="30" style="fill: #fdd; stroke: red;">     <animate id="circle-anim"  attributeName="cx" ...         begin="0s" dur="3s" repeatCount="3"         from="60" to="260" fill="freeze"/> </circle> <rect x="230" y="100" width="60" height="60" style="fill: #ccf; ...">     <animate attributeName="x" attributeType="XML"         begin="circle-anim.repeat(1) + 1.5s" dur="3s"         from="230" to="30" fill="freeze"/> </rect>

• 값제어 속성
  • from = "초기값"
  • to = "종료값"
  • by = "변화량"
  • values = "중간값 리스트"
  • calcMode = (discrete | linear | paced | spline), keyTimes, keySplines

  예제

  <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>

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

<animate ... />

• 수치값 속성 : from="..." to="..."
• <animate  attributeName="opacity"  attributeType="CSS"
                 from="1"  to="0"  dur="5s"  repeatCount="indefinite" />

<set ... />

• 비수치값 속성 : to="..."  (from 이 필요없다)
• 예)
   <set  attributeName="visibility"  attributeType="CSS"
            to="visible"  begin="3s"  dur="6s"  fill="freeze" />
  

• 예제

<g id="all">  <circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray;">      <animate id="c1" attributeName="r" attributeType="XML"        begin="all.click" dur="2s" from="30" to="12" fill="freeze"/>  </circle>  <text text-anchor="middle" x="60" y="62" style="visibility: hidden;">      <set  attributeName="visibility" attributeType="CSS"           to="visible" begin="c1.begin+2.5s" dur="1s"  fill="freeze" />          All gone ?  </text> </g>

<animateColor ... />

• from="색상"  to="색상" 
• <animate ... > 에서는 color 변화 불가능 : non-single value
• 예)
     <animateColor attributeName="fill" attributeType="CSS"
            from="rgb(0,0,255)" to="rgb(128,0,0)"  begin="3s" dur="6s" fill="freeze" />

• 예제

<circle cx="60" cy="60" r="30"         style="fill: #ff9; stroke: gray; stroke-width:10;">     <animateColor  attributeName="fill"         begin="click+2s" dur="4s" from="#ff9" to="red" fill="freeze"/>     <animateColor  attributeName="stroke"         begin="prev.begin" dur="4s" from="gray" to="blue" fill="freeze"/> </circle>

<animateTransform ... />

• transform 속성 : type="변환"  from="..."  to="..." 
• attributeName="transform"   
• type="translate | scale | rotate | skewX | skewY"
• 예)
     <animateTransform attributeName="transform" attributeType="XML"  
              type="scale" from="1" to="3"  additive="sum"  begin="3s" dur="6s" fill="freeze" />

• 예제

<rect x="-10" y="-10" width="20" height="20"       style="fill: #ff9; stroke: black;">   <animateTransform attributeType="XML"       attributeName="transform" type="scale"       from="1" to="8 2"  begin="click" dur="4s" fill="freeze"/> </rect>
<rect x="-10" y="-10" width="20" height="20" style="...">   <animateTransform  attributeName="transform"         type="scale"  from="1" to="4 2"  additive="sum" ... />   <animateTransform  attributeName="transform"         type="rotate"  from="0" to="45"  additive="sum" ... /> </rect>

<animateMotion ... />

• 속성 :
• path="..."  rotate="각도 | auto | auto-reverse"
• calcMode="discrete | linear | paced | spline"
• keyPoints, keyTimes, keySplines

예제

<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" />

• 애니메이션 모드
• calcMode="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" />  <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" />

• 복합 예제

<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>