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

上图:

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:;
right:;
margin: auto;
} .draw_btn {
width: 28vw;
position: absolute;
top: 31vw;
right:;
left:;
margin: auto;
border: 1px #0D0D0D solid;
background-color: #BFEFFF;
border-radius: 5vw;
}

微信小程序动画之圆形进度条的更多相关文章

  1. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  2. 微信小程序动画:高度渐变,left渐变

    今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...

  3. 微信小程序动画实现(API,css)

    微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...

  4. 微信小程序动画技巧

    用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...

  5. 微信小程序canvas实现圆形计时器功能

    index.js import Canvas from '../../utils/canvas.js'Page({ ...Canvas.options, /** * 页面的初始数据 */ data: ...

  6. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  7. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  8. 微信小程序 --- 动画

    动画的基本使用: 旋转动画 缩放动画 偏移动画 倾斜动画 矩阵动画 动画API:wx.createAnimation(object) 示例:创建一个点击的动画 <view class=" ...

  9. 微信小程序——动画操作时,rpx 和 px 的转换计算。

    嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.wind ...

随机推荐

  1. Scss换肤

    项目中虽然没有一键换肤的要求,但是产品要求后期能换主题.在开发组件中涉及到主题的地方,要提取一些公用的变量,不要直接写死样式值.但是如果只是定义一些变量的话,只是完成控制颜色等值的提取.后期切换的话需 ...

  2. js分号问题

    总结一句话: 一行开头是括号(比如IIFE)或者方括号的时候加上分号就可以

  3. datatable与实体类之间相互转化的几种方法

    #region DataTable转换成实体类 /// <summary> /// 填充对象列表:用DataSet的第一个表填充实体类 /// </summary> /// & ...

  4. MongoDB 不在开源了,使用 Homebrew 安装只能玩社区版了

    使用了大半年的 mongodb ,最近在公司的新项目中应用,在 mac 上安装 mongodb 时发现始终安装不了,一直在报下面这样的错误: brew install mongodb 升级 brew  ...

  5. /dev/random 和 /dev/urandmon的差别

    最近使用这两个设备的时候,发现 /dev/random生成随机数很慢:于是就查了查: 这两个设备的差异在于:/dev/random的random pool依赖于系统中断,因此在系统的中断数不足时,/d ...

  6. Centos7.6 Apache 虚拟机禁止访问IP,允许访问多域名多个虚拟目录设置

    存放配置文件路径 /etc/httpd/conf.d自定义命名,配置文件后缀格式确保 *.conf注:这是两个配置文件,也是两种方法. # 一个WEB目录# 禁止以IP地址形式访问<Virtua ...

  7. AtCoder Regular Contest 99

    传送门 C - Minimization 第一次可能有多种选择,我们枚举所有的选择,然后两边贪心取即可. Code #include <bits/stdc++.h> #define MP ...

  8. 06. Go 语言结构体

    Go语言结构体(struct) Go 语言通过用自定义的方式形成新的类型,结构体是类型中带有成员的复合类型.Go 语言使用结构体和结构体成员来描述真实世界的实体和实体对应的各种属性. Go 语言中的类 ...

  9. SP1716 GSS3 - Can you answer these queries III 线段树

    问题描述 [LG-SP1716](https://www.luogu.org/problem/SP1716] 题解 GSS 系列的第三题,在第一题的基础上带单点修改. 第一题题解传送门 在第一题的基础 ...

  10. 第04组 Alpha冲刺(3/4)

    队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(3/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.收集各个组员的进度 2.写博客 展示GitHub当日代码/文档签入记录: 接下 ...