小程序loding动画组件封装及源码

效果图如下

使用方法示例 wxml

<progress percentage="{{percentage}}" wx:if="{{lodingType != ''}}" lodingType="{{lodingType}}" bindfwhfLoding="hideFwhfLoding" speed="{{speed}}"/>
<button bindtap="changeLoding" data-value="lodingOne">lodingOne</button>
<button bindtap="changeLoding" data-value="lodingTwo">lodingTwo</button>
<button bindtap="changeLoding" data-value="lodingThree">lodingThree</button>
<button bindtap="changeLoding" data-value="lodingFour">lodingFour</button>
<button bindtap="changeLoding" data-value="lodingFive">lodingFive</button>

Page({data: {percentage:100,lodingType:'',speed:0.1},onLoad: function (options) {let timer = setInterval(() => {if (this.data.percentage < 100){this.setData({percentage: this.data.percentage + 10,speed:this.rand(1,10)/10})}},6000)},changeLoding(e){this.setData({percentage: 10,lodingType: e.currentTarget.dataset.value})},hideFwhfLoding(){this.setData({lodingType: ''})},rand(n, m){var c = m - n + 1;return Math.floor(Math.random() * c + n);}
})

组件源码
wxml

<canvas class="progress" canvas-id="fwhfProgress" catchtouchmove="preventTouchMove"></canvas>

wxss

.progress{width:100vw;height:100vh;position: absolute;z-index:999;
}

Component({properties: {'percentage':{type: Number,value: 0},'lodingType':{type: String,value: ''},'speed': {type: Number,value: ''}},data: {width: '',height: '',skewHeight: 30,},lifetimes: {attached: function () {var that = this;wx.getSystemInfo({success(res) {that.setData({width: res.screenWidth,height: res.screenHeight})switch (that.data.lodingType){case 'lodingOne':that.canvasProgressOne();break;case 'lodingTwo':that.canvasProgressTwo();break;case 'lodingThree':that.canvasProgressThree();break;case 'lodingFour':that.canvasProgressFour();break;case 'lodingFive':that.canvasProgressFive();break;default:wx.showToast({title: '传入loding类型不在组件允许范围内',icon: 'none'})break;}}})},detached: function () {// 在组件实例被从页面节点树移除时执行},},methods: {preventTouchMove(){return;},canvasProgressOne() {let canvasContext = wx.createCanvasContext("fwhfProgress", this);let startPoint = 0;let number = 0;let timerOne = setInterval(() => {canvasContext.clearRect(0, 0, this.data.width, this.data.height);canvasContext.beginPath();canvasContext.setStrokeStyle('#48BF56');canvasContext.setLineWidth(10);canvasContext.setLineCap('round')canvasContext.arc(this.data.width / 2, this.data.height / 2 - this.data.skewHeight, 40, startPoint, 1 / 2 * Math.PI + startPoint)canvasContext.stroke();canvasContext.closePath();canvasContext.beginPath();canvasContext.setFillStyle('#48BF56');canvasContext.arc(this.data.width / 2, this.data.height / 2 - this.data.skewHeight, 30, 0, 2 * Math.PI);canvasContext.fill();canvasContext.closePath();canvasContext.beginPath();canvasContext.setFillStyle('#000');canvasContext.setFontSize(16);canvasContext.setTextAlign('center');canvasContext.setTextBaseline('middle');canvasContext.fillText(parseInt(number) + '%', this.data.width / 2, this.data.height / 2 - this.data.skewHeight);canvasContext.fill();canvasContext.closePath();canvasContext.draw();if (startPoint == 2 * Math.PI) {startPoint = 1 / 36 * Math.PI} else {startPoint += 1 / 36 * Math.PI}if (number < 100) {if (number < this.data.percentage) {number += this.data.speed;}} else {clearInterval(timerOne);this.triggerEvent('fwhfLoding', {lodingType: ''})}}, 20);},canvasProgressTwo() {let canvasContext = wx.createCanvasContext("fwhfProgress", this);let number = 0;let timerTwo = setInterval(() => {canvasContext.clearRect(0, 0, this.data.width, this.data.height);canvasContext.beginPath();canvasContext.setStrokeStyle('#ccc');canvasContext.setLineWidth(16);canvasContext.setLineCap('round')canvasContext.moveTo(this.data.width / 8, this.data.height / 2 - this.data.skewHeight);canvasContext.lineTo(this.data.width * 7 / 8, this.data.height / 2 - this.data.skewHeight);canvasContext.stroke();canvasContext.closePath();canvasContext.beginPath();canvasContext.setStrokeStyle('#48BF56');canvasContext.setLineWidth(16);canvasContext.setLineCap('round')canvasContext.moveTo(this.data.width / 8, this.data.height / 2 - this.data.skewHeight);canvasContext.lineTo(this.data.width / 8 + (this.data.width * 3 / 4 * number / 100), this.data.height / 2 - this.data.skewHeight);canvasContext.stroke();canvasContext.closePath();if (number > 6) {canvasContext.beginPath();canvasContext.setFillStyle('#000');canvasContext.setFontSize(16);canvasContext.setTextAlign('right');canvasContext.setTextBaseline('middle');canvasContext.fillText(parseInt(number) + '%', this.data.width / 8 + (this.data.width * 3 / 4 * number / 100), this.data.height / 2 - this.data.skewHeight);canvasContext.fill();canvasContext.closePath();}canvasContext.draw();if (number < 100) {if (number < this.data.percentage) {number += this.data.speed;}} else {clearInterval(timerTwo);this.triggerEvent('fwhfLoding', {lodingType: ''})}}, 20)},canvasProgressThree() {let arcNumber = 6;let arcPoint = [];for (var i = 0; i < arcNumber; i++) {arcPoint.push([this.data.width / 2 + 40 * Math.cos(i / arcNumber * 2 * Math.PI), this.data.height / 2 - this.data.skewHeight + 40 * Math.sin(i / arcNumber * 2 * Math.PI)])}let canvasContext = wx.createCanvasContext("fwhfProgress", this);let number = 0;let arcPointIng = 0;let arcPointOld = '';let arcPointIngR = 1;let timerThree = setInterval(() => {canvasContext.clearRect(0, 0, this.data.width, this.data.height);canvasContext.setFillStyle('#48BF56');for (var i = 0; i < arcNumber; i++) {canvasContext.beginPath();if (i == arcPointIng) {canvasContext.arc(arcPoint[i][0], arcPoint[i][1], 10 + arcPointIngR, 0, 2 * Math.PI);} else if (i == arcPointOld) {canvasContext.arc(arcPoint[i][0], arcPoint[i][1], 20 - arcPointIngR, 0, 2 * Math.PI);} else {canvasContext.arc(arcPoint[i][0], arcPoint[i][1], 10, 0, 2 * Math.PI);}canvasContext.fill();canvasContext.closePath();}canvasContext.beginPath();canvasContext.setFillStyle('#000');canvasContext.setFontSize(16);canvasContext.setTextAlign('center');canvasContext.setTextBaseline('middle');canvasContext.fillText(parseInt(number) + '%', this.data.width / 2, this.data.height / 2 - this.data.skewHeight);canvasContext.fill();canvasContext.closePath();canvasContext.draw();if (arcPointIngR == 10) {arcPointIngR = 1;arcPointOld = arcPointIng;if (arcPointIng == arcNumber - 1) {arcPointIng = 0} else {++arcPointIng}} else {++arcPointIngR;}if (number < 100) {if (number < this.data.percentage) {number += this.data.speed;}} else {clearInterval(timerThree);this.triggerEvent('fwhfLoding', {lodingType: ''})}}, 20)},canvasProgressFour() {let canvasContext = wx.createCanvasContext("fwhfProgress",this);let number = 0;let skewHeight = 80;let skewHeightSpeed = -2;let timerFour = setInterval(() => {canvasContext.clearRect(0, 0, this.data.width, this.data.height);canvasContext.save();canvasContext.beginPath();canvasContext.arc(this.data.width / 2, this.data.height / 2 - this.data.skewHeight, 40, 0, 2 * Math.PI);canvasContext.clip();canvasContext.closePath();canvasContext.beginPath();canvasContext.setStrokeStyle('#48BF56');canvasContext.arc(this.data.width / 2, this.data.height / 2 - this.data.skewHeight, 40, 0, 2 * Math.PI);canvasContext.stroke();canvasContext.closePath();canvasContext.beginPath();canvasContext.setFillStyle('#48BF56');//当前高度var height = this.data.height / 2 - this.data.skewHeight - (80 * (number / 100).toFixed(2) - 40);canvasContext.moveTo(this.data.width / 2 - 40, height);canvasContext.bezierCurveTo(this.data.width / 2, height - skewHeight, this.data.width / 2, height + skewHeight, this.data.width / 2 + 40, height);canvasContext.lineTo(this.data.width / 2 + 40, this.data.height / 2 - this.data.skewHeight + 40);canvasContext.lineTo(this.data.width / 2 - 40, this.data.height / 2 - this.data.skewHeight + 40);canvasContext.fill();canvasContext.closePath();canvasContext.beginPath();canvasContext.setFillStyle('#000');canvasContext.setFontSize(16);canvasContext.setTextAlign('center');canvasContext.setTextBaseline('middle');canvasContext.fillText(parseInt(number) + '%', this.data.width / 2, this.data.height / 2 - this.data.skewHeight);canvasContext.fill();canvasContext.closePath();canvasContext.restore();canvasContext.draw();if (skewHeight == 40) {skewHeightSpeed = -1;}if (skewHeight == -40) {skewHeightSpeed = 1;}skewHeight += skewHeightSpeed;if (number < 100) {if (number < this.data.percentage){number += this.data.speed;}} else {canvasContext.clearRect(0, 0, this.data.width, this.data.height);canvasContext.beginPath();canvasContext.setFillStyle('#48BF56');canvasContext.arc(this.data.width / 2, this.data.height / 2 - this.data.skewHeight, 40, 0, 2 * Math.PI);canvasContext.fill();canvasContext.closePath();canvasContext.beginPath();canvasContext.setFillStyle('#000');canvasContext.setFontSize(16);canvasContext.setTextAlign('center');canvasContext.setTextBaseline('middle');canvasContext.fillText('100%', this.data.width / 2, this.data.height / 2 - this.data.skewHeight);canvasContext.fill();canvasContext.closePath();canvasContext.draw();clearInterval(timerFour)this.triggerEvent('fwhfLoding', {lodingType: ''})}}, 30)},canvasProgressFive() {let canvasContext = wx.createCanvasContext("fwhfProgress", this);let number = 0;let arcPointIng = 0;let arcPointIngSpeed = 1;let arcPointIngCore = 0;let arcPointIngCoreWidth = 0;let arcPointIngCoreHeight = 0;let arcPointIngR = this.data.width / 20;let arcPointIngStratAngle = Math.PI;let arcPointIngRotateAngle = 0;let arcPointIngRotateAngleNumber = 0;let timerFive = setInterval(() => {canvasContext.clearRect(0, 0, this.data.width, this.data.height);for(var i = 0 ; i < 7 ; i++){canvasContext.beginPath();// canvasContext.setLineCap('round')if (arcPointIng == i){canvasContext.setFillStyle('#48BF56');canvasContext.arc(this.data.width * (2 + i) / 10, this.data.height / 2 - this.data.skewHeight, 10, 0, 2 * Math.PI)canvasContext.fill();}else{canvasContext.setStrokeStyle('#48BF56');canvasContext.arc(this.data.width * (2 + i) / 10, this.data.height / 2 - this.data.skewHeight, 10, 0, 2 * Math.PI)canvasContext.stroke();}canvasContext.closePath();}if (arcPointIngRotateAngleNumber == 18){arcPointIngRotateAngleNumber = 0;arcPointIngRotateAngle == 0;if (arcPointIngSpeed == 1 && arcPointIng % 2 == 1) {arcPointIngStratAngle = Math.PI;}if (arcPointIngSpeed == 1 && arcPointIng % 2 == 0) {arcPointIngStratAngle = 0;}if (arcPointIngSpeed == -1 && arcPointIng % 2 == 0) {arcPointIngStratAngle = Math.PI;}if (arcPointIngSpeed == -1 && arcPointIng % 2 == 1) {arcPointIngStratAngle = 0;}arcPointIng += arcPointIngSpeed;}if (arcPointIng == 6) {arcPointIngStratAngle = 0;arcPointIngSpeed = -1}if (arcPointIng == 0) {arcPointIngSpeed = 1arcPointIngStratAngle = Math.PI;}if (arcPointIngSpeed == 1 && arcPointIng % 2 == 0) {arcPointIngRotateAngle += Math.PI / 18;}if (arcPointIngSpeed == 1 && arcPointIng % 2 == 1) {arcPointIngRotateAngle -= Math.PI / 18;}if (arcPointIngSpeed == -1 && arcPointIng % 2 == 0) {arcPointIngRotateAngle -= Math.PI / 18;}if (arcPointIngSpeed == -1 && arcPointIng % 2 == 1) {arcPointIngRotateAngle += Math.PI / 18;}arcPointIngRotateAngleNumber++;arcPointIngCore = this.data.width * (4 + 2 * arcPointIng + arcPointIngSpeed) / 20;arcPointIngCoreWidth = arcPointIngCore + arcPointIngR * Math.cos(arcPointIngStratAngle + arcPointIngRotateAngle);arcPointIngCoreHeight = this.data.height / 2 - this.data.skewHeight + arcPointIngR * Math.sin(arcPointIngStratAngle + arcPointIngRotateAngle);canvasContext.beginPath();canvasContext.setFillStyle('#48BF56');canvasContext.arc(arcPointIngCoreWidth, arcPointIngCoreHeight, 10, 0, 2 * Math.PI)canvasContext.fill();canvasContext.closePath();canvasContext.beginPath();canvasContext.setFillStyle('#000');canvasContext.setFontSize(16);canvasContext.setTextAlign('center');canvasContext.setTextBaseline('middle');canvasContext.fillText(parseInt(number) + '%', this.data.width / 2, this.data.height / 2 - this.data.skewHeight - 40);canvasContext.fill();canvasContext.closePath();canvasContext.draw();if (number < 100) {if (number < this.data.percentage) {number += this.data.speed;}} else {clearInterval(timerFive);this.triggerEvent('fwhfLoding', {lodingType: ''})}}, 30)}},
})

小程序loding动画组件封装及源码相关推荐

微信小程序开屏动画组件封装以及使用示例
思路首先调用wx.hideTabbar() 隐藏微信小程序的tabbar 封装一个开屏动画组件,在几秒后自动关闭在关闭的时候调用 wx.showTabber();来使tabbar显示出来效果展示 ...
校园跑腿微信小程序跑腿同学带直播新版源码
校园跑腿微信小程序跑腿同学带直播新版源码适用类型微信小程序测试环境:系统环境:CentOS Linux 7.6.1810 (Core).运行环境:宝塔 Linux v7.0.3(专业版).网站环 ...
微信小程序支付功能-服务器端实现(附源码)
实现了小程序最新的V3版本支付功能, 包括:支付.支付通知.退款.退款通知. 服务器端使用java开发,springboot框架源码链接在评论中微信小程序支付功能-服务器端实现(附源码)_哔哩哔哩 ...
微信小程序录音+播放组件封装(源码）
展示长按录音松开结束录音点击播放再次点击暂停再次点击继续播放展示效果: 录音功能录音功能(手指按下开始录音手指松开结束录音): 使用wx原生录音功能在 component 外新建 wx ...
微信小程序图片验证组件封装
一.图片滑动验证组件延迟页面展示或者延缓并发处理.当滑动图片到空缺位置后执行加载或者验证. 二.封装源码 1.wxml <!--遮罩层,弹框图片背景,滑动框图片比例:16:9 1.777777 ...
php微信小程序海报,微信小程序海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToTe ...
基于movable-view的微信小程序拖拽排序（含源码）
目录一.前言与效果展示二.源码 1.目录结构 2.drag.wxml文件 3.drag.wxss文件 (1)drag.less (2)drag.wxss 不会使用less的就用这个 4.drag ...
微信小程序-在线音乐播放器及源码
引言自己刚开始学微信小程序的时候,自己做着玩玩的. 现在分享出来给大家学习用用,如果觉得有借鉴意义,我的目的就算达到了. 成果 1.效果图废话不多说,直接上效果图: 2.主要功能歌曲列表加载.刷 ...
600多个微信小程序源码_微信小程序在线音乐播放器及源码下载
引言自己刚开始学微信小程序的时候,自己做着玩玩的. 现在分享出来给大家学习用用,如果觉得有借鉴意义,我的目的就算达到了. 成果效果图废话不多说,直接上效果图: 这里本来是GIF的图,但是太大了 ...

小程序loding动画组件封装及源码

小程序loding动画组件封装及源码相关推荐

最新文章

热门文章