uni-app animation 绑定事件 二次点击无效果

问题解释：

在使用uni-app开发应用时，如果你发现使用animation绑定的事件（如begin、end等）在二次点击时无效，可能是因为动画已经在第一次点击时开始或结束，之后被缓存或处于完成状态，因此不再响应后续的点击事件。

解决方法：

1. 在每次点击时重置animation的状态。可以通过设置animation的animation属性为一个新的对象来实现。
2. 确保每次点击时都会触发动画。可以通过设置一个标志位来控制动画是否执行。

示例代码：

<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。这样在二次点击时就不会执行已经完成的动画，而是会重新创建一个新的动画实例。