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


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 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
JavaScript中的继承之类继承
May 01 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
js读取本地文件的实例
Dec 22 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
DJI全球:DJI Global
2021/03/15 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
大学生涯自我鉴定
2014/01/16 职场文书
超市端午节活动方案
2014/01/23 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
对教师的评语
2014/04/28 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书