作者：樂烙清欢1982 | 来源：互联网 | 2022-12-06 13:14
我正在用Vue构建的应用程序中创建一个组件。此组件是倒计时，范围从X分钟到00:00。
我知道可以进行动画处理svg以获得期望的结果，但是我没有必要的知识。我从未使用过任何svg图书馆。
我需要在进度组件中创建以下动画：
动画需要根据天气顺畅地遵循路径。路径节点应根据时间插入/更新。
这是我的实际倒数组件：
var app = new Vue({
el: '#app',
data: {
date: moment(2 * 60 * 1000)
},
computed: {
time: function(){
return this.date.format('mm:ss');
}
},
mounted: function(){
var timer = setInterval(() => {
this.date = moment(this.date.subtract(1, 'seconds'));
if(this.date.diff(moment(0)) === 0){
clearInterval(timer);
alert('Done!');
}
}, 1000);
}
});
{{ time }}
这是进度圈的svg：
如何获得理想的结果？
欢迎所有帮助。
1> Decade Moon..：
您需要熟悉SVG形状，尤其
这是一个例子：
Vue.component('progress-ring', {
template: '#progress-ring',
props: {
value: {
type: Number,
default: 0,
},
min: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 1,
},
text: {
type: null,
default: '',
},
},
computed: {
theta() {
const frac = (this.value - this.min) / (this.max - this.min) || 0;
return frac * 2 * Math.PI;
},
path() {
const large = this.theta > Math.PI;
return `M0,-46 A46,46,0,${large ? 1 : 0},1,${this.endX},${this.endY}`;
},
endX() {
return Math.cos(this.theta - Math.PI * 0.5) * 46;
},
endY() {
return Math.sin(this.theta - Math.PI * 0.5) * 46;
},
},
});
new Vue({
el: '#app',
});
body {
font-family: sans-serif;
}
.progress-ring {
width: 100px;
height: 100px;
}
.progress-ring-circle {
stroke: rgba(0, 0, 0, 0.1);
stroke-width: 1;
fill: none;
}
.progress-ring-ring {
stroke: #007fff;
stroke-width: 2;
fill: none;
}
.progress-ring-end {
fill: #007fff;
}
京公网安备 11010802041100号