1. 安装 Vivus
Vivus 可以通过多种方式安装，以下是几种常见的方法：
a. 使用 npm 安装
如果你在使用 npm 进行项目管理，可以通过以下命令安装 Vivus：
npm install vivus
b. 使用 Yarn 安装
如果你使用 Yarn 作为包管理工具，可以使用以下命令：
yarn add vivus
c. 使用 CDN
如果你不想通过 npm 或 Yarn 安装，可以直接在 HTML 文件中引入 Vivus 的 CDN：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.2/vivus.min.js"></script>
2. 创建 SVG 图形
使用 Vivus 之前，首先需要有一个 SVG 图形。下面是一个简单的 SVG 示例：
<svg id="my-svg" width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="none"/>
<line x1="100" y1="20" x2="100" y2="180" stroke="black" stroke-width="3"/>
<line x1="20" y1="100" x2="180" y2="100" stroke="black" stroke-width="3"/>
</svg>
确保将 SVG 的 id 设置为一个唯一的值，以便在 JavaScript 中进行引用。
3. 初始化 Vivus
在 SVG 创建完成后，你可以使用以下代码来初始化 Vivus：
<script>
new Vivus('my-svg', {
type: 'oneByOne', // 动画类型
duration: 200, // 动画持续时间
start: 'inViewport', // 动画开始时机
forceRender: false // 是否强制渲染
});
</script>
4. Vivus 的配置选项
Vivus 提供了多种配置选项，可以根据需要进行调整：
-
type: 动画类型，支持以下几种：oneByOne: 一个接一个地描绘路径。delayed: 延迟地描绘路径。sync: 同时描绘所有路径。async: 异步描绘路径。
-
duration: 动画持续时间，以帧为单位，默认值为 200。 -
start: 动画开始的时机，可以设置为：'inViewport': 当 SVG 进入视口时开始。'manual': 手动触发开始动画。
-
forceRender: 布尔值，是否强制重新渲染动画。 -
pathTimingFunction: 动画的时序函数，可以控制动画的速度变化。支持的值包括：linear: 匀速动画。easeIn: 逐渐加速。easeOut: 逐渐减速。easeInOut: 先加速后减速。
5. 使用回调函数
Vivus 允许在动画结束后执行回调函数。你可以在初始化 Vivus 时添加 onComplete 属性：
<script>
new Vivus('my-svg', {
type: 'oneByOne',
duration: 200,
start: 'inViewport',
forceRender: false,
onReady: function() {
console.log('Vivus has been initialized.');
},
onComplete: function() {
console.log('Animation completed.');
}
});
</script>
6. 动态控制动画
你可以通过 Vivus 提供的方法动态控制动画。例如，可以在用户点击按钮时触发动画：
<button id="play-animation">播放动画</button>
<script>
var myVivus = new Vivus('my-svg', {duration: 200, start: 'manual'});
document.getElementById('play-animation').onclick = function() {
myVivus.play();
};
</script>
7. 复杂的 SVG 示例
为了更好地理解 Vivus，我们来看一个更复杂的 SVG 示例，并结合 Vivus 进行动画展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vivus Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.2/vivus.min.js"></script>
<style>
#my-svg {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<svg id="my-svg" viewBox="0 0 200 200">
<path d="M 50 50 L 150 50 L 150 150 L 50 150 Z" stroke="black" stroke-width="2" fill="none"/>
<circle cx="100" cy="100" r="40" stroke="black" stroke-width="2" fill="none"/>
<line x1="100" y1="60" x2="100" y2="140" stroke="black" stroke-width="2"/>
<line x1="60" y1="100" x2="140" y2="100" stroke="black" stroke-width="2"/>
</svg>
<button id="play-animation">播放动画</button>
<script>
var myVivus = new Vivus('my-svg', {
duration: 200,
start: 'manual',
type: 'oneByOne',
onComplete: function() {
console.log('动画已完成');
}
});
document.getElementById('play-animation').onclick = function() {
myVivus.play();
};
</script>
</body>
</html>
8. 在实际项目中的应用
Vivus 可以应用在各种场景中，例如：
- 网页加载动画：可以在用户进入页面时播放 SVG 加载动画。
- 用户引导：通过动画展示步骤或操作提示，引导用户完成特定任务。
- 品牌宣传：使用动画展示品牌的 logo，提高用户的记忆度。
9. 性能考虑
在使用 Vivus 时，有几点需要注意：
- SVG 图形的复杂度：较复杂的 SVG 图形可能导致性能下降，尽量优化 SVG 的路径数量和复杂度。
- 视口控制：使用
start: 'inViewport'可以确保动画仅在视口中可见时触发，减少不必要的动画计算。 - 动画的频率：如果动画频繁触发，建议考虑合并动画，或者使用 CSS 动画来替代。
