SVG动画

SVG – 动画

1. 动画原理

动画实际上就是值 关于 时间 的函数

• from 起始值
• to 结束值
• duration 总时长
• timing-function 值关于时间的函数
• frame 帧 很小的时间段
• interpolation 每一帧的差值

2. SMIL - 定位动画目标

1. 使用 xlink:href="url()" 定位

<anmiate xlink:href="url(#rect1)"></animate>

2. 直接放在 要作用的标签内

    <rect>
        <animate></animate>
    </rect>

3. SMIL - 基本动画

动画可以叠加

• attributeType=“XML” : XML|CSS 动画作用的属性，可以是 xml 的属性，也可以是css中的属性
• attributeName=“x” : 需要变化的属性 x|y|fill|stroke 等
• from=“10” : 起始点
• to=“100” : 结束点
• dur=“3s” : 时长
• fill=“freeze” : remove|freeze 动画结束后 移除动画效果|停在动画结束位置
• repeatCount=“100” : 循环次数 数值|indefinite 无限循环
• begin=“0” : 什么时候开始 可以使用关键词定义

      <svg>
         <rect x="100" y="100" width="100" height="100" fill="red">
            <animate
               id="addwidth"
               attributeType="XML"
               attributeName="width"
               begin="0; subwidth.end"
               from="100"
               to="20"
               dur="3s"
            >
            </animate>
            <animate
               id="subwidth"
               attributeType="XML"
               attributeName="width"
               begin="addwidth.end"
               from="20"
               to="100"
               dur="3s"
            >
            </animate>
         </rect>
      </svg>

4. SMIL - 变换动画

使用 animateTransform 标签，不能叠加，只能覆盖

    <animateTransform
           id="transform"
           attributeType="XML"
           attributeName="transform"
           type="rotate"
           from="0"
           to="360"
           dur="3s"
        >
    </animateTransform>

5. SMIL - 轨迹动画

使用 animateMotion 标签

    <svg >
         <rect x="-25" y="-25" width="50" height="50" fill="blue">
            <animateMotion
               dur="3s"
               rotate="auto"
            >
               <mpath xlink:href="#motionPath"></mpath>
            </animateMotion>
         </rect>
         <path id="motionPath" d=M50,50C100,10,100,50,62,15 stroke="gray" fill="none"></path>
      </svg>

6. 脚本控制动画

这里没有做演示，可以根据不同时间点对svg 图形的值进行一些计算，然后通过 js 赋值

    <svg id="main" width="500px" height="500px"></svg>
      <script type="text/javascript">
         var main = document.querySelector('#main');
         var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );

         rect.setAttribute('width', '100');
         rect.setAttribute('height', '30');
         rect.setAttribute( "style", "fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" );
         main.appendChild( rect );
      </script>

更多 SVG 的 API 请看这里