小程序动画-图形旋转进度条

实现效果（还是有很多不完善，如果你是需要多个你可以复制然后改个名字就可以重负使用了，当然你也可以弄成组件来高可用）:

index.wxml

<view class='content'>
  <image class='img' animation="{{animationData}}" src='{{statusImage}}'></image>
  <view class='row {{statusClass}}'></view>
</view>

index.wxss

.content {
  margin-left: 5%;
  margin-top: 50%;
}
.img {
  width: 30px;
  height: 30px;
}
.row {
  display: inline-block;
  width: 70%;
  height: 30px;
  margin-left: 10px;
  border-radius: 10px;
}
/* 加载 */
.load {
   background-color: #7B7878;
}
/* 失败 */
.failing {
  background-color: #E51C23;
}
/* 成功 */
.success {
  background-color: #7FCA27;
}

index.js

data 变量是根据你的业务来做处理的，这个随机应变。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    rotateIndex: '',
    animationData: {},
    statusImage: '/resource/images/1/line_loading.png',
    statusClass: 'load'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 创建动画
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease'
    })
    this.animation = animation
    // 图片旋转
    this.imageRotators()
  },
  // 图片一直旋转动画
  imageRotators: function () {
    //连续动画需要添加定时器,所传参数每次+1就行
    this.timeInterval = setInterval(function () {
      this.data.rotateIndex = this.data.rotateIndex + 1;
      this.animation.rotateZ(360 * (this.data.rotateIndex)).step()
      this.setData({
        animationData: this.animation.export()
      })
    }.bind(this), 500)
    // 请求API接口或者别的操作
    this.request()
  },
  // 停止旋转
  stopRotators: function () {
    if (this.timeInterval > 0) {
      clearInterval(this.timeInterval)
      this.timeInterval = 0
    }
  },
  // 请求API接口或者别的操作
  request: function(e) {
    var that = this
    console.log('request')
    setTimeout(function () {
      // 停止旋转
      that.stopRotators()
      console.log('请求到了数据或者操作完成,停止旋转')
      // 这里是根据自己的业务逻辑设置
      var data =  true
      if (data) {
        that.setData({
          statusImage: '/resource/images/1/line_success.png',
          statusClass: 'success'
        })
      } else {
        that.setData({
          statusImage: '/resource/images/1/line_fail.png',
          statusClass: 'failing'
        })
      }
    }, 3000)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})