使用wx:for的多个view，绑定animation，怎么单独触发不同动画？

看了下以前别人提的问题的回答试了下还是不行啊，有没有大佬帮忙给个解决方案啊？？新手求带。。。

********************wxml*****************************************************************************

<swiper  previous-margin=‘60rpx’ next-margin=‘60rpx’>

<swiper-item   wx:for="{{content}}"wx:key=’{{item.creat_time}}’>

<view class=‘main’>

<!–正面的框  -->

<view class=“box b1” animation="{{animationMain}}" bindtap=‘rotateFn’ data-id=“1” >

<image src=""></image>

</view>

<!–背面的框  -->

<view class=“box b2” animation="{{animationBack}}"  bindtap=‘rotateFn’ data-id=“2”>

<image src=""></image>

</view>

</view>

</swiper-item>

</swiper>

*****************js***********************************************************************

Page({

data: {

animationMain: null,//正面

animationBack: null,//背面

content: [“1”, “2”]

},

rotateFn(e) {

var id = e.currentTarget.dataset.id

this.animation_main = wx.createAnimation({

duration: 400,

timingFunction: ‘linear’

})

this.animation_back = wx.createAnimation({

duration: 400,

timingFunction: ‘linear’

})

// 点击正面

if (id == 1) {

this.animation_main.rotateY(180).step()

this.animation_back.rotateY(0).step()

this.setData({

animationMain: this.animation_main.export(),

animationBack: this.animation_back.export(),

})

}

// 点击背面

else {

this.animation_main.rotateY(0).step()

this.animation_back.rotateY(-180).step()

this.setData({

animationMain: this.animation_main.export(),

animationBack: this.animation_back.export(),

})

}

},

})