本文实例为大家分享了微信小程序动画之圆形进度条，供大家参考，具体内容如下

上图：

代码：

js:

//获取应用实例var app=GetApp(var)区间；var varNamevar CTX=wx。createcanvascontext(' canvasArcCir ')；page({ data : } }，draw circle : function(){ clearInterval(Varname)；函数CTX。setfillstyle(' white ')；ctx.clearRect(0，0，200，200)；CTX。draw()；var x=100，y=100，半径=96;CTX。setline width(7)；CTX。setstrokestyle(' # BFEFFF ')；CTX。setline cap(' round ')；CTX。begin path()；ctx.arc(x，y，半径，s，e，false)；CTX。中风(CTX)。draw()} var step=1，startAngle=1.5 * Math 。，endAngle=0；var animation_interval=1000，n=60 var animation=function(){ if(step=n){ endAngle=step * 8 * Math .PI/n 1.5 *数学；drawArc(startAngle，endAngle)；步骤；} else { clearInterval(Varname)；} };varName=setInterval(动画，动画_间隔)；}，onReady:函数(){ //创建并返回绘图上下文语境对象var cxt _ arc=wx。createcanvascontext(' canvasCircle ')；cxt _ arc。setline width(8)；cxt _ arc。setstrokestyle(' # eded ')；cxt _ arc。setline cap(' round ')；cxt _ arc。begin path()；cxt_arc.arc(100，100，96，0，2 *数学，假);cxt _ arc。strike()；cxt _ arc。draw()；}，onLoad:函数（选项){ }})wxml:

view class=' wrap ' view class=' circle-box ' canvas class=' circle ' style=' width :200 px；'height :200 px ' canvasArcCir-id=' canvasArcCir '/canvas canvas class=' circle ' style=' z-index :-5；宽度width :200 px ' height :200 px ' canvasCircle-id=' canvasCircle '/canvasCircle view class=' draw _ BTN ' bind tap=' draw circle '点击开始/view /view/viewwxss:

页面{宽度： 100%；高度： 100%;背景-color : # fff；}.圆框{文本-对齐：中心；保证金-top : 10大众；}.圆圈{位置：绝对值；左： 0；右： 0；margin: auto}。draw _ btn { width: 28vw绝对位置：top : 31v Wright : 0；左： 0；margin : auto order : 1px # 0d0d 0d固体；背景-color : # BFEFFF；边界半径： 5大众；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。