微信小程序环形进度条_微信小程序实现圆形进度条动画

拼搏现实的明天。 2022-12-31 15:25 359阅读 0赞

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

上图：

![Image 1][]

代码：

js：

//获取应用实例

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 () \{

//创建并返回绘图上下文context对象。

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：

点击开始

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;

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[Image 1]:

微信小程序环形进度条_微信小程序实现圆形进度条动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关微信小程序｜步骤条

相关微信小程序｜进度条

相关微信小程序进度条详解 progress 自定圆形进度条

相关微信小程序环形进度条_微信小程序实现圆形进度条动画

相关音乐播放进度条html,微信原生小程序实现音乐播放进度条

相关在微信小程序中实现进度条实例

相关微信小程序圆形进度条倒计时效果

相关微信小程序day02_12之基础组件进度条

相关微信小程序进度条 progress组件

相关微信小程序之首页圆形导航条