取消我的页面圆形进度条的动画效果,原因:App动画时会抖动

master
chen 2022-04-02 09:42:53 +08:00
parent 476de6e246
commit fe4b5e8c85
2 changed files with 146 additions and 160 deletions

View File

@ -10,15 +10,15 @@
onLaunch: function() { onLaunch: function() {
// //
// #ifdef APP-PLUS // #ifdef APP-PLUS
getApp().globalData.hostapi = 'https://7and5.cn'; this.globalData.hostapi = 'https://7and5.cn';
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
this.globalData.hostapi = 'https://7and5.cn'; this.globalData.hostapi = 'https://7and5.cn';
// #endif // #endif
// #ifdef H5 // #ifdef H5
// uni.setStorageSync('hostapi','/web'); this.globalData.hostapi = 'https://7and5.cn';
getApp().globalData.hostapi = '/web'; // this.globalData.hostapi = '/web';
// #endif // #endif
}, },
onShow: function() { onShow: function() {
// if(uni.getStorageSync('token')){ // if(uni.getStorageSync('token')){

View File

@ -1,176 +1,162 @@
<template> <template>
<view <view class="circle-progress"
class="circle-progress" :style="{width: widthPx + 'px',height: widthPx + 'px',backgroundColor: bgColor}">
:style="{
width: widthPx + 'px',
height: widthPx + 'px',
backgroundColor: bgColor
}"
>
<!-- 有的不支持canvas-id属性必须用id属性 --> <!-- 有的不支持canvas-id属性必须用id属性 -->
<canvas v-if="canvasId" <canvas v-if="canvasId" class="canvas-bg" :canvas-id="canvasId" :id="canvasId"
class="canvas-bg" :style="{width: widthPx + 'px',height: widthPx + 'px'}"></canvas>
:canvas-id="canvasId" <canvas v-if="elId" class="canvas" :canvas-id="elId" :id="elId"
:id="canvasId" :style="{width: widthPx + 'px',height: widthPx + 'px'}"></canvas>
:style="{
width: widthPx + 'px',
height: widthPx + 'px'
}"
></canvas>
<canvas v-if="elId"
class="canvas"
:canvas-id="elId"
:id="elId"
:style="{
width: widthPx + 'px',
height: widthPx + 'px'
}"
></canvas>
<slot></slot> <slot></slot>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'circle-progress', name: 'circle-progress',
props: { props: {
// //
percent: { percent: {
type: Number, type: Number,
default: 0, default: 0,
// 0100 // 0100
validator: val => { validator: val => {
return val >= 0 && val <= 100; return val >= 0 && val <= 100;
}
},
//
inactiveColor: {
type: String,
default: '#ececec'
},
//
activeColor: {
type: String,
default: '#009dff'
},
// 线rpx
borderWidth: {
type: [Number, String],
default: 14
},
// rpx
width: {
type: [Number, String],
default: 200
},
// ms
duration: {
type: [Number, String],
default: 1500
},
//
bgColor: {
type: String,
default: '#ffffff'
} }
}, },
// data() {
inactiveColor: { return {
type: String, canvasId: this.randomId(), //
default: '#ececec' elId: this.randomId(),
widthPx: uni.upx2px(this.width), // px
borderWidthPx: uni.upx2px(this.borderWidth), // px
startAngle: -Math.PI / 2, // canvas312
progressContext: null, // canvas
newPercent: 0, //
oldPercent: 0 //
};
}, },
// watch: {
activeColor: { percent(nVal, oVal = 0) {
type: String, if (nVal > 100) nVal = 100;
default: '#009dff' if (nVal < 0) oVal = 0;
this.newPercent = nVal;
this.oldPercent = oVal;
setTimeout(() => {
this.drawCircleByProgress(oVal);
}, 50);
}
}, },
// 线rpx created() {
borderWidth: { // 使
type: [Number, String], this.newPercent = this.percent;
default: 14 this.oldPercent = 0;
}, },
// rpx
width: {
type: [Number, String],
default: 200
},
// ms
duration: {
type: [Number, String],
default: 1500
},
//
bgColor: {
type: String,
default: '#ffffff'
}
},
data() {
return {
canvasId: this.randomId(), //
elId: this.randomId(),
widthPx: uni.upx2px(this.width), // px
borderWidthPx: uni.upx2px(this.borderWidth), // px
startAngle: -Math.PI / 2, // canvas312
progressContext: null, // canvas
newPercent: 0, //
oldPercent: 0 //
};
},
watch: {
percent(nVal, oVal = 0) {
if (nVal > 100) nVal = 100;
if (nVal < 0) oVal = 0;
this.newPercent = nVal;
this.oldPercent = oVal;
setTimeout(() => {
this.drawCircleByProgress(oVal);
}, 50);
}
},
created() {
// 使
this.newPercent = this.percent;
this.oldPercent = 0;
},
mounted() { mounted() {
this.drawProgressBg(); this.drawProgressBg();
this.drawCircleByProgress(this.oldPercent); this.drawCircleByProgress(this.oldPercent);
},
methods: {
//progressID
randomId(){
return 'progressId'+parseInt(Math.random()*1000000)
},
drawProgressBg() {
let ctx = uni.createCanvasContext(this.canvasId, this);
ctx.setLineWidth(this.borderWidthPx); //
ctx.setStrokeStyle(this.inactiveColor); // 线
ctx.beginPath(); //
let radius = this.widthPx / 2;
ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
ctx.stroke(); //
ctx.draw();
}, },
drawCircleByProgress(progress) { methods: {
let ctx = this.progressContext; //progressID
if (!ctx) { randomId() {
ctx = uni.createCanvasContext(this.elId, this); return 'progressId' + parseInt(Math.random() * 1000000)
this.progressContext = ctx; },
drawProgressBg() {
let ctx = uni.createCanvasContext(this.canvasId, this);
ctx.setLineWidth(this.borderWidthPx); //
ctx.setStrokeStyle(this.inactiveColor); // 线
ctx.beginPath(); //
let radius = this.widthPx / 2;
ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
ctx.stroke(); //
ctx.draw();
},
drawCircleByProgress(progress) {
let ctx = this.progressContext;
if (!ctx) {
ctx = uni.createCanvasContext(this.elId, this);
this.progressContext = ctx;
}
//
ctx.setLineCap('round');
// 线
ctx.setLineWidth(this.borderWidthPx);
ctx.setStrokeStyle(this.activeColor);
//
let time = Math.floor(this.duration / 200);
let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
ctx.beginPath();
// canvas
let radius = this.widthPx / 2;
ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
ctx.stroke();
ctx.draw();
//
//
// if (this.newPercent > this.oldPercent) {
// progress++;
// if (progress > this.newPercent) return;
// } else {
// //
// progress--;
// if (progress < this.newPercent) return;
// }
//
progress = this.newPercent;
setTimeout(() => {
//
this.drawCircleByProgress(progress);
// }, time);
}, 0);
} }
//
ctx.setLineCap('round');
// 线
ctx.setLineWidth(this.borderWidthPx);
ctx.setStrokeStyle(this.activeColor);
//
let time = Math.floor(this.duration / 200);
let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
ctx.beginPath();
// canvas
let radius = this.widthPx / 2;
ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
ctx.stroke();
ctx.draw();
//
if (this.newPercent > this.oldPercent) {
progress++;
if (progress > this.newPercent) return;
} else {
//
progress--;
if (progress < this.newPercent) return;
}
setTimeout(() => {
//
this.drawCircleByProgress(progress);
}, time);
} }
} };
};
</script> </script>
<style scoped> <style scoped>
.circle-progress { .circle-progress {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.canvas-bg {
position: absolute; .canvas-bg {
} position: absolute;
.canvas { }
position: absolute;
} .canvas {
position: absolute;
}
</style> </style>