小程序loding动画组件封装及源码
作者：互联网
效果图如下
 |  |  |  |  |
<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>
js
Page({
data: {
percentage:100,
lodingType:'',
speed:0.1
},
onl oad: 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;
}
js
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 = 1
arcPointIngStratAngle = 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)
}
},
})
标签：封装,canvasContext,height,width,源码,let,loding,data,Math 来源： https://blog.csdn.net/qq_42231248/article/details/114221446