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