微信小程序中使用Animation实现简约Loading效果

效果图：

wxml内容：

<!-- loading.wxml -->
<view class="loading">
  <view class="dot" animation="{{alpha[0]}}"></view>
  <view class="dot" animation="{{alpha[1]}}"></view>
  <view class="dot" animation="{{alpha[2]}}"></view>
  <view class="dot" animation="{{alpha[3]}}"></view>
  <view class="dot" animation="{{alpha[4]}}"></view>
</view>

wxss内容：

/** loading.wxss **/
.loading {
  width: 100%;
  position: absolute;
  bottom: 150rpx;
  justify-content: center;
  text-align: center;
}

.loading .dot{
  background-color: #fff;
  display: inline-block;
  /**圆点大小在这里设置，高宽一致，圆角值为高宽的一半**/
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
  margin: 0 10rpx;
  opacity: 0;
}

js内容：

/* loading.js */
Page({
  data: {
    alpha: [1,1,1,1,1]
  },
  onLoad: function () {
    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 ? 4 : _index - 1] = an_hide;
      self.setData({
        alpha: _alpha
      })
      _index = _index == 4 ? 0 : _index + 1;
    }, _speed);
  }
})