SVG-Animation

SVG动画有多牛？先看看吧，人家的

demo1
资料

其实一开始我就想学学 这样的效果
简单说一下实现吧，不想看可以直接飞机票

本例中用到了盒子布局

body{
      display:flex;
   }
 里面用到  -webkit-box-pack ="center" body 所有子元素居中对齐。 
 还有，关于 display 到兼容性问题。。。

display
webkit兼容性
下面是我们的svg文件,这就是主角 魔天伦的盒子

先实现左右摇摆

<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="-90 0 180 180"  width="50" height="50" version="1.0">
<g>   
 <use id="" xlink:href="#svgdemo" />
    <animateTransform
       attributeName="transform" 
       attributeType="XML"
       type="rotate"
       values='0 0 0; 5 0 0; -15 0 0; 15 0 0; -10 0 0; 15 0 0; -15 0 0; 0 0 0' 
       keyTimes="0; 0.04; 0.08; 0.43; 0.51; 0.58; 0.95; 1" 
       calcMode="linear"
       dur="10s"
       delay="0.5s" 
       repeatCount="indefinite"    />
   </g>  
</svg>

animateTransform 指定类型 rotate 设置关键值，values '0,0,0'第一个值角度，2，3分别指x,y坐标 colcMode

再实现绕圆转圈

<svg>#motion</svg>圆
<svg>#carriage</svg>魔天伦盒子
实现
<svg>                                              ---whell 魔天伦
      <use xlink:href="#motion"/>     ---加载圆为动画轨迹
      <g>                                            ---两个盒子（组合）
            <g>                                      --其中一个
              <animateMotion>              ---引用圆为动画轨迹
                  <mpath xlink:href="#motion"/>  --指定动画
              </animateMotion>
              <animateTransform>         ---左右摇摆动画
                ........
              </animateTransform> 
        　</g>
            <g>                                      ---第二个
            </g>
    </g>
</svg>