svg路径动画插件——vivus.js使用记录
Vivus是一个轻量级的JavaScript类(没有依赖关系),它允许您对svg进行动画处理,使它们具有正在绘制的外观。有多种不同的动画可供选择,还可以创建自定义脚本,以您喜欢的任何方式绘制SVG。
一、安装
- npm:npm install vivus
- bower install vivus
- 通过script引用到页面
二、使用
本例子使用vue框架,在引入插件之后初始化如下:
<template> <div style="margin:40px"> <div id="my-vivus1"></div> <el-button @click="myVivus.play(1)"> 播放 </el-button> <el-button @click="myVivus.stop()"> 停止 </el-button> <el-button @click="myVivus.reset()"> 重置 </el-button> </div> </template> <script> import Vivus from "vivus"; export default { data() { return { myVivus: "", }; }, mounted() { this.myVivus = new Vivus( "my-vivus1", { reverseStack: true, type: "oneByOne", onReady() { console.log("ready"); }, file: require("@/assets/images/demo.svg"), duration: 1000, }, function () { console.log("finish"); } ); }, }; </script>
总结为:new Vivus(id,options,callBack)
id:存放或者是svg本身的id
options:如何实现动画的各种参数
callBack:在完成调用之后的回调函数
三、options常用参数
- type定义了该以什么样的形式绘制svg的路径动画
- type:"delayed"默认值。以下图片粉色横线表示运动总时长,黑色线条表示每条path标签的运动时间,蓝色线条表示最开始的path标签运动轨迹和最后一条path标签饿运动轨迹,每个path的起始运动时间延迟分布。
demo如下:
2.type:"sync"以下图片粉色横线表示运动总时长,黑色线条表示每条path标签的运动时间。每一条的path的运动时间和总时间是一样的,时间同步。
demo如下:
3.type:"oneByOne"以下图片粉色横线表示运动总时长,黑色线条表示每条path标签的运动时间,一个path标签进行完运动之后接着下一条的path标签再进行动画,一个接着一个。
demo如下:
- file:'svg地址';如果使用了file参数后,就会往指定的id容器里面插入对应的svg文件,如果容器也是svg标签的话依旧会插入,所以最好容器为非svg标签。
四、options完成参数列表
名称 | 类型 | 描述 |
type | string | 定义将使用哪种动画:delayed 、sync 、oneByOne 、script 或。[默认值:]scenario scenario-sync delayed |
file | string | 链接到 SVG 以制作动画。如果设置,Vivus 将创建一个对象标签并将其附加到给构造函数的 DOM 元素。小心,onReady 在玩 Vivus 实例之前使用回调 |
start | string | 定义如何触发动画(inViewport 一旦 SVG 在视口中,manual 让您可以自由调用 draw 方法开始,autostart 使其立即开始)。[默认值:inViewport ] |
duration | integer | 动画持续时间,以帧为单位。[默认值:200 ] |
delay | integer | 绘制第一条路径和最后一条路径之间的时间,以帧为单位(仅适用于delayed 动画)。 |
onReady | funciton | 实例准备好播放时调用的函数。 |
pathTimingFunction | funciton | SVG 的每个路径元素的定时动画方法。检查计时功能部分。 |
animTimingFunction | funciton | 完整 SVG 的定时动画方法。检查计时功能部分。 |
dashGap | integer | 破折号之间的空白额外边距。如果动画初始状态出现故障,请增加它。[默认值:2 ] |
forceRender | boolean | 强制浏览器重新渲染所有更新的路径项。默认情况下,该值仅true 在 IE 上。(有关更多详细信息,请查看“疑难解答”部分)。 |
reverseStack | boolean | 颠倒执行顺序。默认行为是从 SVG 中的第一个“路径”渲染到最后一个。此选项允许您反转顺序。[默认值:false ] |
selfDestroy | boolean | 删除 SVG 上的所有额外样式,并将其保留为原始样式。 |
五、完整方法
名称 | 描述 |
play(speed, callback) | 以参数中给定的速度播放动画。该值可以为负数表示后退,介于 0 和 1 之间表示慢速,>1 表示更快,或 <0 表示从当前状态反转。[默认值:1 ]。动画结束后执行的回调(可选) |
stop() | 停止动画。 |
reset() | 将 SVG 重新初始化为原始状态:未绘制。 |
finish() | 将 SVG 设置为最终状态:绘制。 |
setFrameProgress(progress) | 设置动画的进度。进度必须是 0 到 1 之间的数字。 |
getStatus() | 获取 , start ,progress 之间的动画状态end |
destroy() | 重置 SVG 但使实例无序。 |
六.vivus内置了几种运动方法
Vivus.LINEAR
Vivus.EASE
Vivus.EASE_OUT
Vivus.EASE_IN
Vivus.EASE_OUT_BOUNCE
可以用在pathTimingFunction和animTimingFunction 上如
animTimingFunction:Vivus.EASE_OUT_BOUNCE;
如:
mounted() { this.myVivus = new Vivus( "my-vivus1", { reverseStack: true, type: "oneByOne", animTimingFunction:Vivus.EASE_OUT_BOUNCE, file: require("@/assets/images/demo.svg"), duration: 300, }, ); },
参考文档:vivus.js的github仓库
微信公公众号 搜索 “不正经小前端” 并关注,和我一起学习海量前端技术
本文来自博客园,作者:七分暖,转载请注明原文链接:https://www.cnblogs.com/lin494910940/p/16302001.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签