微信小程序开发动感十足的加载动画--都在这里！

微信小程序开发动感十足的加载动画--都在这里.jpg

1. 概述

我们在学习微信小程序时，应该会遇到载入图片或者动画需要等待的情况，那么这个等待的画面我们应该怎么编写呢？今天我们就分享这样的小教程。

不多说了，二当家要上图来啦！

image
image
image
image

更多动画自ji关注下载

2 . wxml 文件

<!--index.wxml-->
<view class="container">
    <view id="loading" hidden="{{loadingHidden}}">
        <view id="loading-center">
            <view id="loading-center-absolute">
                <view class="object" id="object_one"></view>
                <view class="object" id="object_two"></view>
                <view class="object" id="object_three"></view>
                <view class="object" id="object_four"></view>
                <view class="object" id="object_five"></view>
                <view class="object" id="object_six"></view>
                <view class="object" id="object_seven"></view>
                <view class="object" id="object_eight"></view>
                <view class="object" id="object_big"></view>
            </view>
        </view>
    </view>
</view>

3 . js 文件

Page({
  /**
   * 页面的初始数据
   */
  data: {
    loadingHidden: true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
     loadingHidden: false
    });
    var that = this;
    wx.request({
      url: 'https://www.geekxz.com/action/works/recWorks', 
      data: {
         num: '5' ,
      },
      header: {
          'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res.data.data.works);
        that.setData({         
          recWorks:res.data.data.works,
        })
      },
      complete: function() {        // complete
        wx.hideNavigationBarLoading() //完成停止加载
        wx.stopPullDownRefresh()      //停止下拉刷新
      }
    })
    setTimeout(function(){
      that.setData({
        loadingHidden: true
      });
    }, 2000);
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

4 . css文件

   #loading{
    background-color: #db9e36;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
  }
  #loading-center{
    width: 100%;
    height: 100%;
    position: relative;
    }
  #loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 150px;
    width: 150px;
    margin-top: -75px;
    margin-left: -75px; 
    -ms-transform: rotate(45deg); 
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); 
  }
  .object{
    width: 20px;
    height: 20px;
    background-color:#FFF;
    position: absolute;
    left: 65px;
    top: 65px;
    }
  .object:nth-child(2n+0) {
    margin-right: 0px;
  }
  #object_one {
    -webkit-animation: object_one 2s infinite;
    animation: object_one 2s infinite;
    -webkit-animation-delay: 0.2s; 
      animation-delay: 0.2s; 
    }
  #object_two {
    -webkit-animation: object_two 2s infinite;
    animation: object_two 2s infinite;
    -webkit-animation-delay: 0.3s; 
      animation-delay: 0.3s; 
    }
  #object_three {
    -webkit-animation: object_three 2s infinite;
    animation: object_three 2s infinite;
    -webkit-animation-delay: 0.4s; 
      animation-delay: 0.4s; 
    }
  #object_four {
    -webkit-animation: object_four 2s infinite;
    animation: object_four 2s infinite;
    -webkit-animation-delay: 0.5s; 
      animation-delay: 0.5s; 
  }
  #object_five {
    -webkit-animation: object_five 2s infinite;
    animation: object_five 2s infinite;
    -webkit-animation-delay: 0.6s; 
      animation-delay: 0.6s; 
  }
  #object_six {
    -webkit-animation: object_six 2s infinite;
    animation: object_six 2s infinite;
    -webkit-animation-delay: 0.7s; 
      animation-delay: 0.7s; 
  }
  #object_seven {
    -webkit-animation: object_seven 2s infinite;
    animation: object_seven 2s infinite;
    -webkit-animation-delay: 0.8s; 
      animation-delay: 0.8s; 
  }
  #object_eight {
    -webkit-animation: object_eight 2s infinite;
    animation: object_eight 2s infinite;
     -webkit-animation-delay: 0.9s; 
      animation-delay: 0.9s; 
  }
  #object_big{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50px;
    top: 50px;
    -webkit-animation: object_big 2s infinite;
    animation: object_big 2s infinite;
    -webkit-animation-delay: 0.5s; 
      animation-delay: 0.5s; 
  } 
  @-webkit-keyframes object_big {
   50% { -webkit-transform: scale(0.5); }
  }
  @keyframes object_big {
   50% { 
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
    } 
  }
  @-webkit-keyframes object_one {
   50% { -webkit-transform: translate(-65px,-65px)  ; }
  }
  @keyframes object_one {
   50% { 
      transform: translate(-65px,-65px) ;
      -webkit-transform: translate(-65px,-65px) ;
    } 
  }
  @-webkit-keyframes object_two {
    50% { -webkit-transform: translate(0,-65px) ; }
  }
  @keyframes object_two {
   50% { 
      transform: translate(0,-65px) ; 
      -webkit-transform: translate(0,-65px) ; 
    } 
  }
  @-webkit-keyframes object_three {
   50% { -webkit-transform: translate(65px,-65px) ; }
  }
  @keyframes object_three {
   50% { 
      transform: translate(65px,-65px) ;
      -webkit-transform: translate(65px,-65px) ;
    } 
  }
  @-webkit-keyframes object_four {
    50% { -webkit-transform: translate(65px,0) ; }
  }
  @keyframes object_four {
    50% { 
      transform: translate(65px,0) ;
      -webkit-transform: translate(65px,0) ;
    } 
  }
  @-webkit-keyframes object_five {
    50% { -webkit-transform: translate(65px,65px) ; }
  }
  @keyframes object_five {
    50% { 
      transform: translate(65px,65px) ;
      -webkit-transform: translate(65px,65px) ;
    } 
  }
  @-webkit-keyframes object_six {
    50% { -webkit-transform: translate(0,65px) ; }
  }
  @keyframes object_six {
    50% { 
      transform:  translate(0,65px) ;
      -webkit-transform:  translate(0,65px) ;
    } 
  }
  @-webkit-keyframes object_seven {
    50% { -webkit-transform: translate(-65px,65px) ; }
  }
  @keyframes object_seven {
    50% { 
      transform: translate(-65px,65px) ;
      -webkit-transform: translate(-65px,65px) ;
    } 
  }
  @-webkit-keyframes object_eight {
    50% { -webkit-transform: translate(-65px,0) ; 
  }
  @keyframes object_eight {
    50% { 
      transform: translate(-65px,0) ;
      -webkit-transform: translate(-65px,0) ;
    } 
  }
}

5 . 总结

注：如未能获取成功，或者遇到其他问题，本人微信：geekxz 。

如果需要更多动画，欢迎关注 【极客小寨】微信公众号，回复微信小程序动画下载链接！或者回复资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！