vue圆形百分⽐进度条_uniappVue圆环进度条mode="aspectFill">
export default {
name: '',
props: {
},
data() {
return {
animationData: {},
audioCoverImg: '../../static/player/normal.png',
}
},
created() {
this.drawProgressbg()
console.log("动画插件 已经onLoad");
},
mounted() {
},
methods: {
updateInfo: function(img) {
if (this.audioCoverImg != '../../static/player/normal.png') {
return
}
this.audioCoverImg = img
},
// 绘制路径线
drawProgressbg: function() {
var ctx = ateCanvasContext('cpbg', this);
ctx.setLineWidth(4);
ctx.setStrokeStyle('#BFBFBF');
ctx.setLineCap('round');
ctx.beginPath();
ctx.arc(25, 25, 21, 0, 2 * Math.PI, false);
ctx.draw();
},
// 动态绘制圆环
drawCircle: function(step) {
var ctx = ateCanvasContext('cpbar', this); ctx.setLineWidth(4);
ctx.setStrokeStyle('#FF5B45');
ctx.setLineCap('butt');
ctx.beginPath();
// 参数step 为绘制的百分⽐
if (step >= 1) {
step = 2;
} else {
step = step * 2
}
// console.log(step);
ctx.arc(25, 25, 21, 0, step * Math.PI, false); ctx.stroke();
ctx.draw();
},
// 旋转中间的图⽚
rotate: function(duration) {
var animation = ateAnimation({ duration: duration * 1000,
timingFunction: 'linear',
})
this.animation = animation
let deg = Number(360 * duration / 8).toFixed(0) ate(deg).step()
this.animationData = port()
},
// 停⽌图⽚旋转
stopAnimation: function() {
setTimeout(function(){
var animation = ateAnimation({
duration: 0,
timingFunction: 'linear',
})
/
/ let count = Number(360*this.currentDuration/8).toFixed(0) // let deg = count % 360
that.animationData = port()
console.log("停⽌转圈");
},500)
},
// 点击事件
clickAnimationView: function() {
console.log("点击动画view");
margin属性值可以为百分比if (StorageSync('playStatus') == 'fm') {
uni.navigateTo({
url: '/pages/center/fmStory'
})
} else {
uni.navigateTo({
url: '/pages/center/playing'
})
}
}
}
}
.content {
position: fixed;
bottom: 12px;
left: 50%;
margin-left: -25px;
width: 50px;
z-index: 9999;
}
.progress_bg {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
transform: rotate(-90deg); }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。