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


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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript动画浅析
Aug 30 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python3.4爬虫demo
2019/01/22 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
python如何从文件读取数据及解析
2019/09/19 Python
Django实现文件上传下载
2019/10/06 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
安全生产专项整治方案
2014/05/06 职场文书
python数字转对应中文的方法总结
2021/08/02 Python