Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.
vivus是一个轻量级的JavaScript类（没有关系），允许你使SVG，给他们的外表被拖。有各种不同的动画可用，以及选项创建一个自定义脚本来绘制您的SVG以任何您喜欢的方式。
下载地址 View on GitHub
Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.
每个路径元素在同一时间绘制，在开始时有一个小延迟。这是当前默认的动画。
Each line is drawn synchronously. They all start and finish at the same time, hence the name `sync`.
每行同步绘制。它们都同时开始和结束，因此“同步”这个名字。
Each path element is drawn one after the other. This animation gives the best impression of live drawing.
每个路径元素一个接一个地绘制。这个动画给人最好的印象。
To give more freedom, it's possible to override the animation of each path and/or the entire SVG. It works a bit like the CSS animation timing function. But instead of using a cubic-bezier function, it use a simple JavaScript function. It must accept a number as parameter (between 0 to 1), then return a number (also between 0 and 1). It's a hook.
为了提供更多的自由，可以覆盖每个路径和/或整个SVG的动画。它有点像CSS动画计时功能。但它使用的是一个简单的JavaScript函数，而不是使用三次贝塞尔函数。它必须接受一个数字作为参数（在0到1之间），然后返回一个数字（也在0到1之间）。这是一个钩子。
Here an example test to play around with the different properties available.
这里有一个示例测试，可以使用不同的属性。
Type
Path timing function
Anim timing function
This feature allows you to script the animation of your SVG. To do this, the custom values will be set directly in the DOM of the SVG.
此功能允许您编写SVG的动画脚本。为此，将在SVG的DOM中直接设置自定义值。
Here is an example using scenario-sync.
I would recommend you look at the source code and the readme file for more information.
这是使用场景同步的一个例子。 我建议您查看源代码和自述文件以获取更多信息。
Play with it on Vivus instant.
More information and documentation on GitHub.
Thanks for watching.
Made with love a keyboard