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

App.vue

@@ -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'); 
+				this.globalData.hostapi = 'https://7and5.cn';
-				getApp().globalData.hostapi = '/web';
+				// this.globalData.hostapi = '/web';
 			// #endif 
 		},
 		onShow: function() {

components/ar-circle-progress/index.vue

@@ -1,37 +1,17 @@
 <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 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>
 	</view>
 </template>
 
 <script>
-export default {
+	export default {
 		name: 'circle-progress',
 		props: {
 			// 圆环进度百分比值
@@ -109,8 +89,8 @@ export default {
 		},
 		methods: {
 			//一个页面多个progress时ID需不同
-    randomId(){
+			randomId() {
-      return 'progressId'+parseInt(Math.random()*1000000)
+				return 'progressId' + parseInt(Math.random() * 1000000)
 			},
 			drawProgressBg() {
 				let ctx = uni.createCanvasContext(this.canvasId, this);
@@ -142,22 +122,26 @@ export default {
 				ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
 				ctx.stroke();
 				ctx.draw();
+				// 有动画
 				// 增大了百分比
-			if (this.newPercent > this.oldPercent) {
+				// if (this.newPercent > this.oldPercent) {
-				progress++;
+				// 	progress++;
-				if (progress > this.newPercent) return;
+				// 	if (progress > this.newPercent) return;
-			} else {
+				// } else {
-				// 减少百分比
+				// 	// 减少百分比
-				progress--;
+				// 	progress--;
-				if (progress < this.newPercent) return;
+				// 	if (progress < this.newPercent) return;
-			}
+				// }
+				// 无动画
+				progress = this.newPercent;
 				setTimeout(() => {
 					// 定时器，为了让进度条有动画效果
 					this.drawCircleByProgress(progress);
-			}, time);
+				// }, time);
+				}, 0);
 			}
 		}
-};
+	};
 </script>
 
 <style scoped>
@@ -167,9 +151,11 @@ export default {
 		align-items: center;
 		justify-content: center;
 	}
+
 	.canvas-bg {
 		position: absolute;
 	}
+
 	.canvas {
 		position: absolute;
 	}