取消我的页面圆形进度条的动画效果,原因: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,14 +10,14 @@
onLaunch: function() {
//
// #ifdef APP-PLUS
getApp().globalData.hostapi = 'https://7and5.cn';
this.globalData.hostapi = 'https://7and5.cn';
// #endif
// #ifdef MP-WEIXIN
this.globalData.hostapi = 'https://7and5.cn';
// #endif
// #ifdef H5
// uni.setStorageSync('hostapi','/web');
getApp().globalData.hostapi = '/web';
this.globalData.hostapi = 'https://7and5.cn';
// this.globalData.hostapi = '/web';
// #endif
},
onShow: function() {

View File

@ -1,176 +1,162 @@
<template>
<view
class="circle-progress"
:style="{
width: widthPx + 'px',
height: widthPx + 'px',
backgroundColor: bgColor
}"
>
<view class="circle-progress"
:style="{width: widthPx + 'px',height: widthPx + 'px',backgroundColor: bgColor}">
<!-- 有的不支持canvas-id属性必须用id属性 -->
<canvas v-if="canvasId"
class="canvas-bg"
:canvas-id="canvasId"
:id="canvasId"
: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>
<canvas v-if="canvasId" class="canvas-bg" :canvas-id="canvasId" :id="canvasId"
: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>
</view>
</template>
<script>
export default {
name: 'circle-progress',
props: {
//
percent: {
type: Number,
default: 0,
// 0100
validator: val => {
return val >= 0 && val <= 100;
export default {
name: 'circle-progress',
props: {
//
percent: {
type: Number,
default: 0,
// 0100
validator: val => {
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'
}
},
//
inactiveColor: {
type: String,
default: '#ececec'
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 //
};
},
//
activeColor: {
type: String,
default: '#009dff'
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);
}
},
// 线rpx
borderWidth: {
type: [Number, String],
default: 14
created() {
// 使
this.newPercent = this.percent;
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() {
this.drawProgressBg();
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();
mounted() {
this.drawProgressBg();
this.drawCircleByProgress(this.oldPercent);
},
drawCircleByProgress(progress) {
let ctx = this.progressContext;
if (!ctx) {
ctx = uni.createCanvasContext(this.elId, this);
this.progressContext = ctx;
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) {
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>
<style scoped>
.circle-progress {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.canvas-bg {
position: absolute;
}
.canvas {
position: absolute;
}
.circle-progress {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.canvas-bg {
position: absolute;
}
.canvas {
position: absolute;
}
</style>