使用animation动画效果

wxml

<view class="container">
  <view class="page-body">
    <view class="page-section">


      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation2}}"></view>
      </view>
      <view class="animation-buttons" scroll-y="true">
        <button wx:for="{{buttons}}" wx:key="ids" data-item="item" data-index="{{index}}" animation="{{animation2[index]}}" class="animation-button" bindtap="jianyin">渐隐</button>
    
      </view>
    </view>
  </view>
</view>

js

Page({
  data: {  
    animation2: [{},{},{},{},{},{}],
    buttons: [
      {text:'Button 1',ids:0,selected:true},
      {text:'Button 2',ids:1,selected:true},
      {text:'Button 3',ids:2,selected:false},
      {text:'Button 4',ids:3,selected:true},
      {text:'Button 5',ids:4,selected:true},
      {text:'Button 6',ids:5,selected:false},
      ]  
  },  

  jianyin: function (e) {
   
    var index2 = e.currentTarget.dataset.index // 获取点击的按钮索引  
    console.log(index2)
   
    const A = wx.createAnimation({  
        duration: 500, // 动画持续时间（单位：毫秒）  
        timingFunction: 'ease', // 定义动画的效果曲线  
      });  
      // 渐隐效果  
    A.opacity(0).step();

    let animation2 = this.data.animation2

  
    let newArray = animation2.map((mu,index) => {  
      if (index !== index2) {  
        return A.export();  
      } else {  
        return mu;  
      }  
    }) 
    console.log(newArray)
    this.setData({ animation2:newArray}); 
    console.log (this.data.animation2)
  },
  
})

css

.animation-element-wrapper {
  display: flex;
  width: 100%;
  padding-top: 150rpx;
  padding-bottom: 150rpx;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
}
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #1AAD19;
}
.animation-buttons {
  padding: 30rpx 50rpx 10rpx;
  width: 100%;
  height: 700rpx;
  box-sizing: border-box;
}
.animation-button {
  float: left;
  line-height: 2;
  width: 300rpx;
  margin: 15rpx 12rpx;
}


.animation-button-reset {
  width: 620rpx;
}

控制台：