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

}