微信小程序canvas圆形进度条加载动画实现
需要一个圆形进度插件，可以用canvas实现，加载速度与粒度可以自行调节，根据sec 与 speed 进行计算，欢迎交流指导wxml页面 <view class="loading-warp"> <canvas class="canvas" canvas-id="canvasCircle"></canvas> <canvas class="canvas-mask" canvas-id="canvasRing"></canvas> <view class="rate">{{step}}%</view> </view> <view class="loading-tips">{{tips}}</view> wxss部分 /* loading start */ .loading-warp { z-index: 0; position: relative; margin: 100px auto 20px; width: 200px; height: 200px; } .canvas { z-index: 1; width: 200px; height: 200px; } .canvas-mask { z-index: 2; position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .rate { z-index: 1; position: absolute; top: 80px; left: 0; width: 100%; text-align: center; color: #fff; font-size: 40rpx; } .loading-tips { text-align: center; font-size: 40rpx; font-weight: 400; color: #fff; } /* loading end */ js部分 Page({ data: { tips: '加载中', step: 0 }, onReady: function(){ var me = this; var cxt = wx.createCanvasContext('canvasCircle'); cxt.setLineWidth(6); cxt.setStrokeStyle('#eaeaea'); cxt.setLineCap('round'); cxt.beginPath(); cxt.arc(100, 100, 96, 0, 2 * Math.PI, false); cxt.stroke(); cxt.draw(); //加载动画 var steps = 1,startAngle = 1.5 * Math.PI,endAngle = 0,speed = 100,sec = 100; function drawing (s, e) { var context = wx.createCanvasContext('canvasRing'); context.setLineWidth(6); context.setStrokeStyle('#11be0f'); context.setLineCap('round'); context.beginPath(); context.arc(100, 100, 96, s, e, false); context.stroke(); context.draw(); } function drawLoading (){ if(steps < 101){ //这里用me,同步数据,渲染页面 me.setData({ step: steps }) endAngle = steps * 2 * Math.PI / speed + startAngle; drawing(startAngle, endAngle); steps++; console.log(steps); }else{ clearInterval(this.interval); } } this.interval = setInterval(drawLoading,sec); } })
