收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 动画 客户端 6.5.3 2.0.0

使用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(),

})

}

},

})





最后一次编辑于  03-31  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏