微信小程序-实现Loading预加载动态效果

分手后的思念是犯贱 2023-07-18 09:35 14阅读 0赞

需求：实现点击登入按钮有一个预加载效果，如下图

实例参考一：

![20200325163409596.gif][]

实例参考二：

![20200325165552483.gif][]

实例一：

Page({
        data: {
        alpha: [ 1, 1, 1],
    },
      onLoad: function(options) {
        //加载动画
        var self = this;
        var _index = 0;
        var _alpha = self.data.alpha;
        var _speed = 500;
        var timer = setInterval(function () {
          var an_show = wx.createAnimation({});
          var an_hide = wx.createAnimation({});
          an_show.opacity(1).step({ duration: _speed });
          an_hide.opacity(0).step({ duration: _speed });
          _alpha[_index] = an_show;
          _alpha[_index == 0 ? 2 : _index - 1] = an_hide;
          self.setData({
            alpha: _alpha
          })
          _index = _index == 2 ? 0 : _index + 1;
        }, _speed);
      },
    
    })

实例二：

//js不需要

/*css*/
    .tui-loading-row{
        width: 100%;
        display: table;
        table-layout: fixed;
    }
    .tui-loading-cell{
      width: 100%;
      display: table-cell;
      text-align: center;
    }
    .circle-line{
        width: 100px;
        height: 100px;
        display: inline-block;
        position: relative;
    }
    .circle-line text{
        display: block;
        width: 50%;
        height: 5px;
        opacity: .7;
        position: absolute;
        top: calc(50% - 2.5px);
        left: 0px;
        transform-origin: center right; 
        animation: circle 1.5s linear infinite; 
    }
    .circle-line text::before{
        content: '';
        display: block;
        width: 15px;
        height: 5px;
        position: absolute;
        top: 0;
        right: 10px;
        background-color: red;
    }
    .circle-line text:nth-child(1){
        transform: rotate(0deg);
        animation-delay: 0.2s;
    }
    .circle-line text:nth-child(2){
        transform: rotate(45deg);
        animation-delay: 0.4s;
    }
    .circle-line text:nth-child(3){
        transform: rotate(90deg);
        animation-delay: 0.6s;
    }
    .circle-line text:nth-child(4){
        transform: rotate(135deg);
        animation-delay: 0.8s;
    }
    .circle-line text:nth-child(5){
        transform: rotate(180deg);
        animation-delay: 1s;
    }
    .circle-line text:nth-child(6){
        transform: rotate(225deg);
        animation-delay: 1.2s;
    }
    .circle-line text:nth-child(7){
        transform: rotate(270deg);
        animation-delay: 1.4s;
    }
    .circle-line text:nth-child(8){
        transform: rotate(315deg);
        animation-delay: 1.6s;
    }
    @keyframes circle {
        0%{
            opacity: 0.05;
        }
        100%{
            opacity: 0.9;
        }
    }

参考：

[https://blog.csdn.net/findhappy117/article/details/83104690?depth\_1-utm\_source=distribute.pc\_relevant.none-task&utm\_source=distribute.pc\_relevant.none-task][https_blog.csdn.net_findhappy117_article_details_83104690_depth_1-utm_source_distribute.pc_relevant.none-task_utm_source_distribute.pc_relevant.none-task]

[https://blog.csdn.net/ruixue0117/article/details/83508362][https_blog.csdn.net_ruixue0117_article_details_83508362]

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[20200325163409596.gif]: /images/20230528/a794fd2819f34130902bde5d2672ba94.png
[20200325165552483.gif]: /images/20230528/e3de9e198bc943f6b42c1c92aeb603f1.png
[https_blog.csdn.net_findhappy117_article_details_83104690_depth_1-utm_source_distribute.pc_relevant.none-task_utm_source_distribute.pc_relevant.none-task]: https://blog.csdn.net/findhappy117/article/details/83104690?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[https_blog.csdn.net_ruixue0117_article_details_83508362]: https://blog.csdn.net/ruixue0117/article/details/83508362