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 = 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();

},

// 動態繪制圓環

drawCircle: function(step) {

var ctx = uni.createCanvasContext('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 = 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()

},

// 停止圖片旋轉

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("停止轉圈");

},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);

}

總結

以上是生活随笔為你收集整理的vue 圆形百分比进度条_uniapp Vue 圆环进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。