微信小程序動(dòng)畫之圓形進(jìn)度條
上圖：
代碼：
js：
//獲取應(yīng)用實(shí)例
var app = getApp()
var interval;
var varName;
var ctx = wx.createCanvasContext('canvasArcCir');
Page({
? data: {
? },
? drawCircle: function () {
? ? clearInterval(varName);
? ? function drawArc(s, e) {
? ? ? ctx.setFillStyle('white');
? ? ? ctx.clearRect(0, 0, 200, 200);
? ? ? ctx.draw();
? ? ? var x = 100, y = 100, radius = 96;
? ? ? ctx.setLineWidth(7);
? ? ? ctx.setStrokeStyle('#BFEFFF');
? ? ? ctx.setLineCap('round');
? ? ? ctx.beginPath();
? ? ? ctx.arc(x, y, radius, s, e, false);
? ? ? ctx.stroke()
? ? ? ctx.draw()
? ? }
? ? var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0;
? ? var animation_interval = 1000, n = 60;
? ? var animation = function () {
? ? ? if (step <= n) {
? ? ? ? endAngle = step * 8 * Math.PI / n + 1.5 * Math.PI;
? ? ? ? drawArc(startAngle, endAngle);
? ? ? ? step++;
? ? ? } else {
? ? ? ? clearInterval(varName);
? ? ? }
? ? };
? ? varName = setInterval(animation, animation_interval);
? },
? onReady: function () {
? ? //創(chuàng)建并返回繪圖上下文context對(duì)象。
? ? var cxt_arc = wx.createCanvasContext('canvasCircle');
? ? cxt_arc.setLineWidth(8);
? ? cxt_arc.setStrokeStyle('#EDEDED');
? ? cxt_arc.setLineCap('round');
? ? cxt_arc.beginPath();
? ? cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false);
? ? cxt_arc.stroke();
? ? cxt_arc.draw();
? },
? onLoad: function (options) {
? }
})
wxml：
<view class="wrap">
? <view class="circle-box">
? ? <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir">
? ? </canvas>
? ? <canvas class="circle" style="z-index: -5; width:200px; height:200px;" canvas-id="canvasCircle">
? ? </canvas>
? ? <view class="draw_btn" bindtap="drawCircle">點(diǎn)擊開始</view>
? </view>
</view>
wxss：
page {
? width: 100%;
? height: 100%;
? background-color: #fff;
}
.circle-box {
? text-align: center;
? margin-top: 10vw;
}
.circle {
? position: absolute;
? left: 0;
? right: 0;
? margin: auto;
}
.draw_btn {
? width: 28vw;
? position: absolute;
? top: 31vw;
? right: 0;
? left: 0;
? margin: auto;
? border: 1px #0D0D0D solid;
? background-color: #BFEFFF;
? border-radius: 5vw;
}
————————————————
版權(quán)聲明：本文為CSDN博主「CodeHunter_qcy」的原創(chuàng)文章，遵循 CC 4.0 BY 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43390235/article/details/92805518
