我的wxml 代码如下

<view hidden="{{hideGoodBox}}" style="position: absolute; top: {{top}}px; left: {{left}}px;" class="good_box" animation="{{animationData}}"></view>

js 代码如下：

   animationData: {},

    hideGoodBox: true,

    dianjix: 0,

    dianjiy: 0,

    zhongdianx: 40,

    zhongdiany: 625

    shangpinshow: function (e) {

    let that = this

    //动画完最终位置

    that.setData({

      dianjix: e.touches[0].clientX,

      dianjiy: e.touches[0].clientY,

      top: e.touches[0].clientY,

      left: e.touches[0].clientX,

      zhongdianx: 40,

      zhongdiany: 625,

      hideGoodBox: false,

      animationData: {},

    })

    console.log(that.data.dianjix)

    console.log(that.data.dianjiy)

    console.log(that.data.left)

    console.log(that.data.top)

    console.log(that.data.zhongdianx)

    console.log(that.data.zhongdiany)

    console.log(that.data.animationData)

    that.startAnimation();

  },

  // 开始动画

  startAnimation: function () {

    let that = this

    const animation = wx.createAnimation({

      duration: 2000, // 动画持续时间

      timingFunction: 'cubic-bezier(.13,.9,.59,2.04)'

    });

    // this.setData({

    //   animationData: animation.translate(this.busPos.x - this.data.left, this.busPos.y - this.data.top).step()

    // });

    animation.translate(that.data.zhongdianx - that.data.dianjix, that.data.zhongdiany - that.data.dianjiy).step()

    that.setData({

      animationData: animation.export()

    });

    console.log(that.data.animationData)

    setTimeout(() => {

      that.setData({

        animationData: {},

        hideGoodBox: true,

      });

    }, 2000); // 动画持续时间加上延迟时间

  },

css 代码

.good_box {

  width: 35rpx;

  height: 35rpx;

  position: absolute;

  border-radius: 50%;

  z-index: 99;

  background-color: #FF6565;

  /* 初始位置，可以通过 JavaScript 动态设置 */

}

我的问题是，第一次点击的时候根据timingFunction: 'cubic-bezier(.13,.9,.59,2.04)'贝塞尔曲线参数来出现动画效果，但是第二次点击时动画就乱了，我在哪儿没写好，各位大佬指点指点，谢谢