效果图
demo代码
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>
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);
}
})wxss
page{
background: black;
}
/* 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 */
