当前位置：首页 > news >正文

Vivus.js 与现代前端框架集成：React、Vue、Angular 终极实践指南

news 2026/6/4 17:00:01

Vivus.js 与现代前端框架集成：React、Vue、Angular 终极实践指南

【免费下载链接】vivusJavaScript library to make drawing animation on SVG项目地址: https://gitcode.com/gh_mirrors/vi/vivus

Vivus.js 是一款轻量级的 JavaScript 库，专注于创建 SVG 路径动画效果，能让静态的 SVG 图形以流畅的笔触动画形式呈现。本文将详细介绍如何在 React、Vue 和 Angular 三大主流前端框架中集成 Vivus.js，帮助开发者轻松实现引人入胜的 SVG 动画效果。

一、Vivus.js 核心动画模式解析 🎨

Vivus.js 提供多种动画模式，满足不同场景需求：

1.1 同步模式（Sync）

所有路径同时开始动画，适合简单图形的整体展示。

Vivus同步模式时序图：所有路径同时开始并结束动画

1.2 顺序模式（One by One）

路径按顺序依次动画，适合需要引导用户视线的场景。

Vivus顺序模式时序图：路径按顺序依次开始动画

1.3 延迟模式（Delayed）

路径同时开始但有不同延迟，创造错落有致的动画效果。

Vivus延迟模式时序图：路径同时开始但有不同延迟

1.4 脚本模式（Script）

自定义路径动画顺序和时间，提供最大灵活性。

Vivus脚本模式默认时序图：自定义路径动画顺序

二、React 集成指南：组件化实现 SVG 动画 ✨

2.1 安装与基础配置

通过 npm 安装 Vivus.js：

npm install vivus

2.2 函数组件实现

创建VivusAnimation.jsx组件：

import React, { useRef, useEffect } from 'react'; import Vivus from 'vivus'; const VivusAnimation = ({ svgId, animationMode = 'oneByOne' }) => { const svgRef = useRef(null); useEffect(() => { if (svgRef.current) { const vivus = new Vivus(svgRef.current, { type: animationMode, duration: 200, start: 'manual' }); // 手动触发动画 vivus.play(); return () => { // 清理资源 vivus.destroy(); }; } }, [animationMode]); return ( <svg ref={svgRef} id={svgId} viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" > {/* SVG路径内容 */} <path d="M10,10 L590,10 L590,390 L10,390 Z" fill="none" stroke="#333" strokeWidth="2" /> </svg> ); }; export default VivusAnimation;

三、Vue 集成方案：响应式 SVG 动画实现 🚀

3.1 安装与导入

npm install vivus

3.2 Vue 组件实现

创建VivusAnimation.vue组件：

<template> <svg ref="vivusSvg" :id="svgId" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" > <!-- SVG路径内容 --> <path d="M10,10 L590,10 L590,390 L10,390 Z" fill="none" stroke="#333" strokeWidth="2" /> </svg> </template> <script> import Vivus from 'vivus'; export default { name: 'VivusAnimation', props: { svgId: { type: String, required: true }, animationMode: { type: String, default: 'oneByOne' } }, mounted() { this.vivus = new Vivus(this.$refs.vivusSvg, { type: this.animationMode, duration: 200, start: 'manual' }); // 触发动画 this.vivus.play(); }, beforeUnmount() { // 清理实例 this.vivus.destroy(); } }; </script>

四、Angular 集成教程：服务与指令结合 🔧

4.1 安装与配置

npm install vivus

4.2 创建 Vivus 服务

// vivus.service.ts import { Injectable } from '@angular/core'; import Vivus from 'vivus'; @Injectable({ providedIn: 'root' }) export class VivusService { createVivusInstance(element: HTMLElement, options: any): Vivus { return new Vivus(element, options); } }

4.3 创建自定义指令

// vivus-animation.directive.ts import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; import { VivusService } from './vivus.service'; @Directive({ selector: '[appVivusAnimation]' }) export class VivusAnimationDirective implements OnInit, OnDestroy { @Input() animationMode = 'oneByOne'; private vivusInstance: any; constructor( private el: ElementRef, private vivusService: VivusService ) {} ngOnInit(): void { this.vivusInstance = this.vivusService.createVivusInstance( this.el.nativeElement, { type: this.animationMode, duration: 200, start: 'manual' } ); this.vivusInstance.play(); } ngOnDestroy(): void { if (this.vivusInstance) { this.vivusInstance.destroy(); } } }

五、高级应用：自定义动画脚本与事件处理 ⚙️

5.1 自定义动画顺序

通过脚本模式实现复杂动画序列：

// 自定义脚本示例 const customScript = [ { el: 'path1', duration: 20 }, { el: 'path2', duration: 10, delay: 5 }, { el: 'path3', duration: 15, delay: 5 } ]; const vivus = new Vivus('my-svg', { type: 'script', script: customScript, start: 'autostart' });

Vivus自定义脚本模式时序图：完全自定义路径动画顺序和时间

5.2 事件监听与控制

// 监听动画完成事件 vivus.on('end', function() { console.log('Animation completed!'); }); // 控制方法 vivus.play(); // 播放 vivus.pause(); // 暂停 vivus.reset(); // 重置 vivus.setFrame(50); // 跳转到指定帧