vue 圆形百分比进度条_uniapp Vue 圆环进度条
mode="aspectFill">
export default {
name: '',
props: {
},
data() {
return {
animationData: {},
audioCoverImg: '../../static/player/normal.png',
}
},
created() {
this.drawProgressbg()
console.log("動畫插件 已經(jīng)onLoad");
},
mounted() {
},
methods: {
updateInfo: function(img) {
if (this.audioCoverImg != '../../static/player/normal.png') {
return
}
this.audioCoverImg = img
},
// 繪制路徑線
drawProgressbg: function() {
var ctx = uni.createCanvasContext('cpbg', this);
ctx.setLineWidth(4);
ctx.setStrokeStyle('#BFBFBF');
ctx.setLineCap('round');
ctx.beginPath();
ctx.arc(25, 25, 21, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.draw();
},
// 動態(tài)繪制圓環(huán)
drawCircle: function(step) {
var ctx = uni.createCanvasContext('cpbar', this);
ctx.setLineWidth(4);
ctx.setStrokeStyle('#FF5B45');
ctx.setLineCap('butt');
ctx.beginPath();
// 參數(shù)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();
},
// 旋轉(zhuǎn)中間的圖片
rotate: function(duration) {
var animation = uni.createAnimation({
duration: duration * 1000,
timingFunction: 'linear',
})
this.animation = animation
let deg = Number(360 * duration / 8).toFixed(0)
animation.rotate(deg).step()
this.animationData = animation.export()
},
// 停止圖片旋轉(zhuǎn)
stopAnimation: function() {
let that = this
setTimeout(function(){
var animation = uni.createAnimation({
duration: 0,
timingFunction: 'linear',
})
// let count = Number(360*this.currentDuration/8).toFixed(0)
// let deg = count % 360
animation.rotate(0).step()
that.animationData = animation.export()
console.log("停止轉(zhuǎn)圈");
},500)
},
// 點擊事件
clickAnimationView: function() {
console.log("點擊動畫view");
if (uni.getStorageSync('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;
height: 50px;
z-index: 9999;
}
.progress_bg {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}
總結(jié)
以上是生活随笔為你收集整理的vue 圆形百分比进度条_uniapp Vue 圆环进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于伟人的名言警句大全222个
- 下一篇： vue中请求接口怎么封装公共地址_vue