Vivus.js动画svg动画学习

代码演示:

var synthD = new Vivus('synth-dynamic', {
　　file: 'vivus-git/synth.svg',
　　type: 'oneByOne',
　　duration: 200,
　　start: 'manual',
　　animTimingFunction: Vivus.EASE_OUT_BOUNCE
});

synth-dynamic：SVG的ID 或 加载外部SVG文件的父标签

file:vivus-git/synth.svg，如果是SVG的ID则可省略此设置，如果是加载外部SVG文件的父标签，对应的值则是SVG文件的路径

type:
　　对就值：delayed 每条路径元素绘制在同一时间用小延迟开始。这是目前默认动画。
　　对就值：scenario-sync 每一行都是同步的。他们都在同一时间开始和结束,因此得名“同步”。
　　对就值：oneByOne 每个路径元素是一个接一个。这个动画给人最好的印象的绘画。

start:是否自动播放，可省略此设置，不设置则默认自动播放
　　对就值：autostart 默认值，自动播放
　　对就值：manual 不自动播放，需要事件触发播放

animTimingFunction:动画效果
　　对就值：LINEAR 动画从头到尾的速度是相同的
　　对就值：EASE 动画以低速开始，然后加快，在结束前变慢。
　　对就值：EASE_IN 动画以低速开始。
　　对就值：EASE_OUT 动画以低速结束。
　　对就值：EASE_OUT_BOUNCE 动画弹性结束

synthD.play(); 播放动画
synthD.reset().play(); 重新播放动画
synthD.play(-3); 倒带，反向收回之前完成的动画

预览：

http://www.jq22.com/demo/vivus-master20160828/

http://www.jq22.com/jquery-info9266