vue svg弧线路线动画组件
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
先看效果
然后直接上代码
组件publicSvg.vue
<template>
<svg style="background:rgba(0,0,0,0.1)" :width="svgObject.endX" :height="svgObject.endY"
xmlns="http://www.w3.org/2000/svg">
<path :d="pathD" fill="none" class="svg-path-flow">
</path>
</svg>
</template>
<script>
export default {
name: "PublicSvg",
components: {},
props: {
svgObject: {
type: Object,
default: null
}
},
computed: {
controlend() {
let x1 = this.svgObject.startX;
let y1 = this.svgObject.startY;
let x2 = this.svgObject.endX;
let y2 = this.svgObject.endY;
let PI = Math.PI;
console.log(x2)
console.log(y2)
let angle = this.svgObject.angle;
// 两点间的x轴夹角弧度
let xAngle = Math.atan2((y2 - y1), (x2 - x1));
// 转为角度
xAngle = 360 * xAngle / (2 * PI);
// 两点间的长度
let L = Math.sqrt((y2 - y1) * (y2 - y1) + (x2 - x1) * (x2 - x1));
// 计算等腰三角形斜边长度
let L2 = L / 2 / Math.cos(angle * 2 * PI / 360);
// 求第一个顶点坐标,位于下边
let val1 = {};
// 求第二个顶点坐标,位于上边
let val2 = {};
val1['x'] = x1 + Math.round(L2 * Math.cos((xAngle + angle) * 2 * PI / 360));
val1['y'] = y1 + Math.round(L2 * Math.sin((xAngle + angle) * 2 * PI / 360));
val2['x'] = x1 + Math.round(L2 * Math.cos((xAngle - angle) * 2 * PI / 360));
val2['y'] = y1 + Math.round(L2 * Math.sin((xAngle - angle) * 2 * PI / 360));
return {
upPoint: val2, // 上方弧线
downPoint: val1 // 下方弧线
};
},
pathD() {
return `M${this.svgObject.startX} ${this.svgObject.startY} Q${this.controlend.upPoint.x} ${this.controlend.upPoint.y} ${this.svgObject.endX} ${this.svgObject.endY}`;
}
},
data() {
return {};
},
created() {
console.log(this.svgObject)
},
methods: {}
}
</script>
<style lang="less" scoped>
// 流光效果
@keyframes path-flow {
0% {
stroke-dashoffset: 200;
opacity: 0.3;
}
50% {
stroke-dashoffset: 100;
opacity: 0.8;
}
100% {
stroke-dashoffset: 0;
opacity: 0.3;
}
}
.svg-path-flow {
opacity: 0;
stroke-width: 10px;
stroke: #0055ff;
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: path-flow 2s linear 2s infinite;
}
</style>
然后是使用方法
<public-svg :svgObject="svgObject" />
import PublicSvg from "@/components/PublicSvg/PublicSvg.vue";
export default {
components: {
PublicSvg
},
data() {
return {
svgObject:{
startX: 50, //起始点X坐标
startY: 50, //起始点Y坐标
endX: 500, //结束点X坐标
endY: 600, //结束点Y坐标
angle: 30 //弧线角度
}
};
}
};
如图所示
弧线样式可以在style中自定义
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)