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

最新推荐文章于 2024-06-18 14:13:27 发布
最新推荐文章于 2024-06-18 14:13:27 发布
阅读量306 收藏 2
点赞数 2
分类专栏： canvas 小程序 文章标签： 小程序 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42231248/article/details/114221446
版权

效果图如下

使用方法示例 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>

js

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;
}

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)
    }
  },
})
风舞红枫
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序自定义组件-loading.rar
01-03
直接解压到自己的项目中即可，需要注意图片路径,在页面中使用this.selectComponent("#loading").show(); this.selectComponent("#loading").hide(); 控制显示隐藏
用box与grid实现九宫格_CSS3 Grid布局实现Loading动画效果
weixin_39653622的博客
11-23 244
点击右上方红色按钮关注“web秀”，让你真正秀起来前言以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？CSS3 Grid布局实现Loading动画效果好的前端动画效果，能给用户带来非常舒适的体验效果，更甚者，有用户觉的你这个动画效果非常nice，反复操作，就为看你这个动画。停留时间，预览量上了，带来的收益也不是一...
微信小程序封装全局加载动画loading
最新发布
qq_44749901的博客
06-18 754
封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。确保调用 selectComponent 的时机是在组件渲染完成之后，可以在 onReady 或 onLoad 生命周期方法中使用。在components新建Loading组件，用来展示动画，并在组件中实现开启和结束动画的方法。注意：在onLaunch调用无效。比如：index.html。
微信小程序 loading 组件实例详解
09-01
主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下
基于wepy开发的微信小程序loading加载动画组件
08-10
基于wepy开发的微信小程序loading加载动画组件
小程序封装加载动画_小程序加载动画
2401_84187563的博客
04-12 578
在需要用到加载动画的地方，通过调用App.js中的showLoading方法显示Loading动画，并在数据加载完毕后调用hideLoading方法关闭Loading动画。封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。在App.js中加载自定义组件Loading，并设定全局方法showLoading和hideLoading来显示和隐藏Loading组件。
MyDlg.zip_封装loding
09-21
在这个上下文中，"封装loding"意味着作者创建了一个类或者组件，将加载动画的逻辑和视觉效果整合在一起，使得开发者在使用时只需要调用预定义的方法，无需关心内部的具体实现细节。这样可以提高代码的可读性和可维护...
wpf切换tab+的加载动画 Loding
02-03
wpf切换tab+的加载动画 Loding ;Component/BusyIndicator.xaml"/> </Application.Resources>
易语言可视化loding源码-易语言
06-13
在这个压缩包中，我们得到了一个名为"易语言可视化loding源码.e"的文件，这显然是一款使用易语言编写的可视化的加载界面（Loding）的源代码。下面我们将详细探讨相关的知识点。 1. **易语言基础**：易语言的基本...
易语言源码易语言可视化loding源码.rar
02-18
在该压缩包中，"易语言可视化loding源码" 文件很可能是包含了一个或多个源代码文件，这些文件详细地实现了loading的动画效果和逻辑控制。可能包括了窗口定义、事件处理、计时器控制、界面更新等相关代码。开发者可以...
Android自定义加载loading view动画组件
01-20
CircleProgress 是一个自定义的 Android 视图组件，专门用于创建一种酷炫的加载动画效果。这个组件在 GitHub 上由用户 Fichardu 开发并发布，仓库地址为 https://github.com/Fichardu/CircleProgress。它允许开发者...
微信小程序loading组件显示载入动画用法示例【附源码下载】
08-28
主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下
微信小程序-加载及完成动画-loadingAnim.rar
01-11
微信小程序-加载及完成动画
微信小程序按钮点击动画效果的实现
01-03
动画效果如下： GIF看起来可能会有点卡 wxml <view class=confirm>确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{ position: relative; overflow: hidden; } .bubble:after
微信小程序：loading组件
Crazy_GirlLL的博客
12-17 644
由于我的是截图，有需要的话，可能需要手敲，怕出错的同学可以去这里，这是我参考的文档：http://www.demodashi.com/demo/14242.html 先创建文件 wxml: wxss: 上面的wxss样式需要找个可以全局使用的文件放起来，然后再组件的wxss中引入： js:Component({})这个应该是必须的，要不然可能会报错或者不显示（我没测试） json: ...
微信小程序--Loading组件
热门推荐
xiaotuni的专栏,每天进步一点点
08-09 1万+
Loading组件 这两天都在看微信小程序开发，在看的过程当中，也会自己写写，有的时候，这个时候就会想到，以前项目当中如ReactJs里会有一些公共的组件好多地方都要用到，于就是想着微信小程序里如何提取出来。 在小程序里提取公共部分叫template。在其它页面上要用的时候，只要引用就可以了，下面就是如何创建一个的步骤吧，自己也标记一下。 效果如下所示，所有完整的代码都github上找到。 创建一个
loading动画_这些Loading动画，引起极度舒适
weixin_28680865的博客
12-25 346
Loading动画，在现在的设计中已经是一个必须要考虑的系统元素，它能减缓用户等待焦虑的心态，也能用来作为品牌透传，增加曝光。loading动画相关知识，对于设计师来说是有必要去了解的。2010年，出现了很多教程教大家如何做CSS3动画，也能找到大量的loading 动画预设包，设计师也可以在Ps中做这种loading动画。到2014年到2016年的时候，设计师更加关注这块的设计。所以，更多关于l...
html实现loding动画
04-14
好的，可以使用CSS实现loading动画，以下是一个例子： HTML: ```html <div class="loading"></div> ``` CSS: ```css .loading { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风舞红枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值