小程序进度条_小程序杂技谈之横向双色进度条

万 圣 节 狂 欢

横向双色进度条

先看效果图

小程序自带的进度条不能满足我们想要的效果，所以这里我们决定用view叠加的方式进行动画增长和展示

编写布局

    

    style="margin-bottom:{{index == arrProgress.length-1 ? 46 : 0}}rpx;">

      {{item.name}}

      = 100}}">

定义样式

page{

  background-color: #f5f5f5;

}

.v_white_border{

  margin-top: 200rpx;

  width: 680rpx;

  margin-left: 35rpx;

  border-radius: 20rpx;

  background-color: #ffffff;

  display: flex;

  flex-direction: column;

}

.normal-progress {

  position: relative;

  height: 95rpx;

  width: 600rpx;

  margin-left: 33rpx;

}

.normal-progress-name{

  height:65rpx;

  width: 150rpx;

  margin-top: 10rpx;

  line-height:65rpx;

  font-size:24rpx;

  color:#070A0C;

}

.normal-double-progress {

  width: 600rpx;

  height: 20rpx;

  background-color: #F5F5F5;

  border-radius: 10rpx;

  white-space: nowrap;

}

.normal-progress-1 {

  position: relative;

  float: left;

  height: 20rpx;

  width: 0;

  background-color: #FF8650;

  border-radius: 10rpx;

  overflow: hidden;

}

.normal-progress-2 {

  position: relative;

  height: 20rpx;

  width: 0;

  background-color: #1C80F1;

}

.wh{

  width:100%;

  overflow: hidden;

  border-radius: 40rpx;

}

.iv_give_like {

  position: absolute;

  top: 48rpx;

  right: -14rpx;

  width: 70rpx;

  height: 70rpx;

  opacity: 0;

}

编写逻辑

我们在.js文件中编写进度条增长动画逻辑

/**

   * 页面的初始数据

   */

  data: {

    arrProgress: [

      {

        "name": "展示",

        "animation1": {},

        "animation2": {},

        "animation3": {}

      },

      {

        "name": "展示",

        "animation1": {},

        "animation2": {},

        "animation3": {}

      },

      {

        "name": "展示",

        "animation1": {},

        "animation2": {},

        "animation3": {}

      },

      {

        "name": "展示",

        "animation1": {},

        "animation2": {},

        "animation3": {}

      }

    ],

    arrPre1 : [50,40,60,100],

    arrPre2 : [80,60,70,100]

  },

上面初始化了5个进度条并定义了最终的长度

然后在onLoad中进行监听页面加载

/**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    this.progress2Animation(this.data.arrPre1, this.data.arrPre2)

  },

这里是主要的逻辑，创建动画createAnimation,并给数组每一个添加动画，计算width的长度并定义增长的时间，最后当到达100时则展示最终动效

progress2Animation: function (arrPre1, arrPre2) {

    var arrNew = [];

    for (var i = 0; i 

      var pre1 = arrPre1[i];

      var animation1 = wx.createAnimation({

        duration: 500

      })

      var animation2 = wx.createAnimation({

        duration: 500

      })

      var animation3 = wx.createAnimation({

        duration: 500

      })

      if(pre1 > 100){

        pre1 = 100

      }

      animation1.width(pre1 * 6 + 'rpx').step();

      animation2.width(pre1 * 6 + 'rpx').step();

      animation3.translateX(pre1 * 6 + 'rpx').step();

      var oldProgress = this.data.arrProgress[i];

      oldProgress.animation1 = animation1.export();

      oldProgress.animation2 = animation2.export();

      oldProgress.animation3 = animation3.export();

      arrNew.push(oldProgress)

    }

    this.setData({

      arrProgress: arrNew,

    });

    var blockThis = this;

    setTimeout(()=>{

      blockThis.animate('.iv_give_like', [

        { opacity: 1, scale: [0.9, 0.9] },

        { opacity: 1, scale: [1.2, 1.2] },

        { opacity: 1, scale: [1, 1] },

        { opacity: 1, scale: [1.1, 1.1] },

        { opacity: 1, scale: [1, 1] }

        ],400, function() {

        }.bind(blockThis))

    },600)

    setTimeout(function () {

      arrNew = [];

      for (var i = 0; i 

        var pre2 = arrPre2[i];

        var animation1 = wx.createAnimation({

          duration: 500

        })

        var animation3 = wx.createAnimation({

          duration: 500

        })

        if(pre2 > 100){

          pre2 = 100

        }

        animation1.width(pre2 * 6 + 'rpx').step();

        animation3.translateX(pre2 * 6 + 'rpx').step();

        var oldProgress = blockThis.data.arrProgress[i];

        oldProgress.animation1 = animation1.export();

        oldProgress.animation3 = animation3.export();

        arrNew.push(oldProgress)

      }

      blockThis.setData({

        arrProgress: arrNew

      })

    }, 500)

  },

这样效果就完成了

万圣节又叫诸圣节，在每年的11月1日，是西方的传统节日；而万圣节前夜的10月31日是这个节日最热闹的时刻。在中文里，常常把万圣节前夜