Animation

Animation의 주요 속성

 

• 애니메이션 요소의 이름 속성
  - attributeName
    : 애니메이션 하고자 하는 속성의 이름
  - attributeType = "CSS | XML | auto"
    ▷ CSS : CSS 스펙에 정의된 속성 (fill, visibility,...)
    ▷ XML : XML namespace로 정의된 속성 (x, y, width, height, transform,...)
    ▷ auto : 속성의 타입을 먼저 CSS에서 찾고 없으면 XML에서 찾는다.
• 시간제어 속성
  - begin = "시간", end = "시간"
  - dur = "clock 시간 | indefinite | media"
  - restart = "always | never"
  - repeatCount = "횟수"
  - repeatDur = "시간"
  - fill = "freeze | remove" (애니메이션 완료 후 속성 값의 지속적인 존재 여부)
  - 시간 값의 표현 방식
    ▷ clock value (5ms, 45 min,...)
    ▷ event value : 객체ID.이벤트 ± 시간 (begin = "click + 5s)
    ▷ synbase value : 객체ID.begin/end ± 시간 (begin = "end + 5s")

<svg width="300" height="300">
    <circle cx="25" cy="25" r="25">
        <animate
            attributeName="cx"
            dur="2s"
            values="25;270;25"
            begin="click"
            repeatCount="1"
            fill="freeze"
            id="black"
        >
        </animate>
    </circle>
    <circle cx="25" cy="100" r="25" fill="coral">
        <animate
        attributeName="cx"
        dur="2s"
        values="25;270;25"
        begin="black.begin+1s"
        repeatCount="1"
        fill="freeze"
        id="coral"
    >
        </animate>
    </circle>
    <circle cx="25" cy="200" r="25" style="fill:gold">
        <animate
        attributeName="cx"
        dur="2s"
        values="25;270;25"
        begin="coral.begin+1s"
        repeatCount="1"
        fill="freeze"
    >
        </animate>
    </circle>
</svg>

• 값 제어 속성
  - from = "초기값"
  - to = "종료 값"
  - by = "변화량"
  - values = "중간값 리스트"
  - calcMode

<svg width="300" height="300">
    <rect x="10" y="10" width="50" height="50" rx="0" ry="0">
        <animate
            attributeName="rx"
            dur="2s"
            values="0;50;0"
            repeatCount="1"
            begin="mouseenter"
            fill="freeze"
        >
        </animate>
        <animate
            attributeName="ry"
            dur="2s"
            values="0;50;0"
            repeatCount="1"
            begin="mouseenter"
            fill="freeze"
        >
        </animate>
        <animate
            attributeName="x"
            dur="2s"
            values="25;270;25"
            repeatCount="1"
            begin="mouseenter"
            fill="freeze"
        >
        </animate>
        <animate
            attributeName="y"
            dur="2s"
            values="25;270;25"
            repeatCount="1"
            begin="mouseenter"
            fill="freeze"
        >
        </animate>
    </rect>
</svg>

• <set ... />
  - 비수치 값 속성 : to = "..." (from이 필요 없다.)

<svg width="300" height="200">
    <circle cx="60" cy="60" r="40" fill="pink">
        <animate
            attributeName="r"
            dur="2s"
            values="40;20;40"
            begin="click"
            fill="freeze"
            id="pink"
        >
        </animate>
    </circle>
    <text x="20" y="60" style="font-size:2rem;visibility:hidden">
        all gone?
        <set
            attributeName="visibility"
            dur="1s"
            to="visible"
            begin="pink.begin+2.5s"
            fill="remove"
        >
        </set>
    </text>
</svg>

• <animateTransform ... />
  - transform 속성 : type="변환" from="..." to="..."
    ▷ attributeName = "transform"
    ▷ type = "translate | scale | rotate | skewX | skewY"
• 애니메이션 상태 제어
  - additive = replace | sum
  - accumulate = none | sum

<svg width="300" height="200">
    <g id="rect_all">
        <rect x="120" y="80" width="40" height="40" style="transform-origin:center;">
            <animateTransform
                attributeName="transform"
                type="scale"
                dur="3s"
                values="1;0.5;2;1"
                begin="click"
                additive="sum"
                >
            </animateTransform>
            <animateTransform
                attributeName="transform"
                type="rotate"
                dur="3s"
                values="45;90;-45;45"
                begin="click"
                additive="sum"
            >
            </animateTransform>
        </rect>
    </g>
    <use xlink:href="#rect_all" x="50"></use>
</svg>

• <animateMotion ... />
  - 속성
    ▷ path = "..."
    ▷ rotate = "각도 | auto | auto-reverse"
    ▷ calcMode = "discrete | linear | paced | spline"
    ▷ keyPoints, keyTimes, keySplines

<svg width="500" height="500">
    <!-- <path class="line" d="M100,250 C 100,50 400,50 400,250" style="fill:none;stroke:#000;stroke-width:3px"/> -->
    <circle cx="15" cy="5" r="10">
        <animateMotion
            path="M100,250 C 100,50 400,50 400,250"
            dur="5s"
            repeatCount="indefinite"
            rotate="auto"
        >
        </animateMotion>
    </circle>
</svg>