小程序 animation用setInterval动画循环,录音按钮的播放效果

//index.wxml
 <view class="block2_2_img_box" >
                  <image src="{{horn1Src}}" mode="widthFix" class='block2_2_img_box_img1'></image>
                   <image src="{{horn2Src}}" mode="widthFix" class='block2_2_img_box_img2' animation="{{animationData}}"></image> 
                   <image src="{{horn3Src}}" mode="widthFix" class='block2_2_img_box_img3' animation="{{animationData2}}"></image> 
                </view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    animationData: {},
    animationData2:{},
    bindAnimationStatus:0 //0为停止播放状态   1为播放状态
  },
  onLoad: function (options) {

  },

  startListen: function () {
    console.log(this.data.bindAnimationStatus);
    //判断当前为播放状态还是停止状态  0为停止，1为播放
    if (this.data.bindAnimationStatus == 0) {
      console.log('ceshi1')
       this.setData({
         bindAnimationStatus: 1
       })
    }else{   
      console.log('ceshi2')
      this.setData({
        bindAnimationStatus: 0
      })
    } 
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
      delay: 5
    })
    var animation2 = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
      delay: 5
    })
    animation.opacity(0.2).opacity(0.5).opacity(1).step()
    animation2.opacity(1).opacity(0.5).opacity(0.2).step()
    this.setData({
      animationData: animation.export(),
      animationData2: animation2.export(),
      animationStatus: 1,
    })
    // 循环========
    var listen = setInterval(function() {
      if (this.data.bindAnimationStatus == 0) {
        console.log("tz")
        clearInterval(listen);
        animation.opacity(1).step()
        animation2.opacity(1).step()
        this.setData({
          animationData: animation.export(),
          animationData2: animation2.export(),
        })
      }else{
        console.log("jixu");
        if (this.data.animationStatus == 1) {
          animation.opacity(1).opacity(0.5).opacity(0.2).opacity(0).step()
          animation2.opacity(0.2).opacity(0.5).opacity(1).step();
          this.setData({
            animationData: animation.export(),
            animationData2: animation2.export(),
            animationStatus: 2,
          })
        } else {
          animation.opacity(0.2).opacity(0.5).opacity(1).step();
          animation2.opacity(1).opacity(0.5).opacity(0.2).step()
          this.setData({
            animationData: animation.export(),
            animationData2: animation2.export(),
            animationStatus: 1,
          })
        }
      }
    }.bind(this), 1000);

  },





})

//录音样式css
.block2_2_img_box{
  width:50%;
  position: absolute;
  top:11%;
  left:25%;
}

.block2_2_img_box_img1{
   width:45%;
   vertical-align: middle;
}
.block2_2_img_box_img2{
   width:20%;
   vertical-align: middle;
   margin-left:0.5vw;
}
.block2_2_img_box_img3{
   width:25%;
   vertical-align: middle;
}