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


Posted in Javascript onNovember 18, 2020

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

上图:

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

代码:

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:

<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">点击开始</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;
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
js事件触发操作实例分析
Jun 21 #Javascript
微信小程序实现下拉刷新动画
Jun 21 #Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 #Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 #Javascript
vue配置文件实现代理v2版本的方法
Jun 21 #Javascript
微信小程序自定义多列选择器使用详解
Jun 21 #Javascript
You might like
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
详解JS函数重载
2014/12/04 Javascript
js中this用法实例详解
2015/05/05 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
python任务调度实例分析
2015/05/19 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
django用户登录验证的完整示例代码
2019/07/21 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
ORACLE十问
2015/04/20 面试题
八一慰问活动方案
2014/02/07 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书