1:dancer.js是一款强大绘制SVG动画的插件， 只需要了解少量的SVG知识用做程序的初始化， 然后进行简单编辑就可以实现不错的动画效果 可能有小伙伴开始怀疑了，插件？编辑？哈哈没错 插件里面提供了一个调试的借口只用调用一下函数，调试面板就会弹出供你编辑哦

1:导入插件dancer.js

2:示例代码(你将会看见一个火柴人)

    var p0=new ControlPoints('p0',[290,256])      //增加控制点
    var p1=new ControlPoints('p1',[210,294])
    var p2=new ControlPoints('p2',[290,188])
    var p3=new ControlPoints('p3',[258,383])
    var p4=new ControlPoints('p4',[296,325])
    var p5=new ControlPoints('p5',[342,378])
    var p6=new ControlPoints('p6',[373,292])
    var p7=new ControlPoints('p7',[429,297])
    var p8=new ControlPoints('p8',[144,305])
    var p9=new ControlPoints('p9',[257,487])
    var p10=new ControlPoints('p10',[357,484])
    var pan=new Dancer(document.getElementById("svg")) //新建一个dancer对象
    pan.addControlPoints(p0)
    pan.addControlPoints(p1)
    pan.addControlPoints(p2)
    pan.addControlPoints(p3)
    pan.addControlPoints(p4)
    pan.addControlPoints(p5)
    pan.addControlPoints(p6)
    pan.addControlPoints(p7)
    pan.addControlPoints(p8)
    pan.addControlPoints(p9)
    pan.addControlPoints(p10)
    pan.addControlPath("M p4 L p5 L p10",{stroke:"#000040",'stroke-width':"14"})       // 用上述定义的控制点根据不同的SVG命令绘制不同的形状
    pan.addControlPath("M p0 L p1 L p8")    //直线命令
    pan.addControlPath(" M p0 L p6 L p7") //直线命令
    pan.addControlPath(" M p0 L p4")      //直线命令
    pan.addControlPath("M p4 L p3 L p9")   //直线命令
    pan.addControlPath("M p0 A 30 30 0 0 1 p2",{fill:"#000040"})  //圆弧命令
    pan.addControlPath(" M p2 A 30 30 0 0 1 p0",{fill:"#000040"})  //圆弧命令
    pan.stroke()                                                                            //到这一步火柴人已经绘制出来啦
    pan.dance([
             {"p4":[295,421],"p0":[306,361],"p2":[305,280]},
             {"p2":[301,221],"p0":[318,288],"p4":[293,328]}
     ])                                                                                      //你将会看见两组动画  很神奇吧 ！ 哈哈
    //pan.debugger()
                

3疑问？

1没错！火柴人之所以能够运动是因为在stroke()方法后，执行了dance()方法而它运动的形式就是你所定义的（JSON对象）不同的点点，向不同的数组坐标那儿运动

2一切看似很美好，可如果让我们一个个去找哪个点运动到哪个位置，那真是件痛苦的事，所以我增加了一个调试功能

3可能细心的小伙伴已经发现了，在上面演示的代码中//pan.debugger()我注释掉了这句话，现在请你不要注释了，允许你会发现哇塞，一些控制点

4拖动不同的控制点会形成一条线，这就是他的运动路径，现在你就在绘制当前的帧，绘制完后点击Save，就会演示一遍进入下一帧

5点击goStart回到初始帧

6点击goEnd最后一帧

7点击goLast到上一帧

8点击gonext到下-帧

9点击show是演示你绘制的所有帧！记住在这之前一定要点goStart回到初始位置，因为如果你不点的话，他会在当前帧往下演示的

10点击out点击out 就会输出一个JSON那就是你 绘制的 所有帧 也是dance方法所需要的参数 复制到dance方法里 注释掉debugger方法 我们就神不知鬼不觉的 完成一组动画啦