Vivus

Vivus 是一个轻量级的 JavaScript 库，专门用于在网页中实现 SVG 路径动画效果。它允许开发者通过简单的配置，将 SVG 图形的绘制过程以动画形式展示出来，从而增强用户的视觉体验。Vivus 的核心功能是自动追踪 SVG 中的路径，并按照设定的动画方式逐步绘制出来，适用于图标展示、加载动画、页面过渡等场景。

Vivus 可以解决传统静态 SVG 展示缺乏吸引力的问题，通过动态绘制提升页面的交互感和现代感。它无需依赖其他库（如 jQuery），兼容性良好，支持现代浏览器及部分旧版本浏览器，适合嵌入各种网页项目中使用。对于前端开发者来说，Vivus 是一个提升界面表现力、优化用户体验的实用工具。

—

使用 Vivus 非常简单。首先，你需要引入 Vivus 的 JavaScript 文件到项目中：

“`html

“`

然后准备一个 SVG 元素，并为其设置唯一的 id：

“`html

“`

最后，使用 JavaScript 初始化 Vivus 实例并设置动画参数：

“`javascript
new Vivus(‘my-svg’, { duration: 200, type: ‘oneByOne’ }, function() {
console.log(‘动画完成’);
});
“`

上述代码将使 SVG 图形按照路径逐个绘制，整个动画过程持续 200 帧，每条路径依次出现。

—