uniapp官网的动画实例需要对其动画属性进行赋值,那么如何在for循环的组件里进去赋值呢?
单独点击图片弹出
实现
html
<view @click="tanchu(index)" v-for="(item,index) in applist">
<image:animation="animationData[index].animationData"></image>//循环
</view>
js
animationData:[]//在data中定义
this.applist.forEach((item,index)=>{
this.animationData.push({animationData:{}})
//用列表长度来给animationData添加对应的字段
})
this.applist.forEach((item,index)=>{
this.animationData.push({animationData:{}})
//用列表长度来给animationData添加对应的字段
})
tanchu(index,url){
var animation = uni.createAnimation({
duration: 500,
timingFunction: 'ease',
})
//这样做会浪费性能,不过方便我截取
this.animation = animation
this.animation.translateX(75).translateY(225).step()
this.animationData[index].animationData = this.animation.export()//每个都绑定实例
},
这样就能单独的对动画属性进行绑定,从而实现点击什么出现什么动画