问题解释：
在使用uni-app开发应用时，如果你发现使用animation绑定的事件（如begin、end等）在二次点击时无效，可能是因为动画已经在第一次点击时开始或结束，之后被缓存或处于完成状态，因此不再响应后续的点击事件。
解决方法：
- 在每次点击时重置animation的状态。可以通过设置animation的
animation属性为一个新的对象来实现。 - 确保每次点击时都会触发动画。可以通过设置一个标志位来控制动画是否执行。
示例代码：
<template>
<view>
<button @click="animate">点击动画</button>
<view animation="{{animationData}}" style="width:100px;height:100px;background-color:red;"></view>
</view>
</template>
<script>
export default {
data() {
return {
animationData: {},
isAnimating: false
}
},
methods: {
animate() {
if (this.isAnimating) {
// 重置动画状态
this.isAnimating = false;
this.animationData = {};
}
const animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
});
animation.translateX(300).step();
this.animationData = animation.export();
// 标记动画开始
this.isAnimating = true;
// 动画结束事件绑定
animation.onEnd(() => {
console.log('动画结束');
this.isAnimating = false;
});
}
}
}
</script>在这个示例中，我们定义了一个isAnimating标志位来控制是否执行动画。在动画开始之前，如果isAnimating为true，我们会先重置动画状态，并将isAnimating设置为false。这样在二次点击时就不会执行已经完成的动画，而是会重新创建一个新的动画实例。