小程序踩过的坑——creatAnimation.left/right 动效不能清除

1. creatAnimation.left 动效不能清除

最近在写小程序的一个动画效果，主要是实现一个可拖动的悬浮小球，并且放手的时候可以自动吸附在右侧。

可拖动小球的实现很简单，参照 微信小程序实现悬浮小球
一开始的思路很简单，就是在悬浮小球的基础之上，然后在tapEnd的事件中给小球添加吸附的动态效果，即用**creatAnimation.left(xxx)**使其回到屏幕的一个固定位置，没想到这样一个简单的效果竟然有无数的坑。

JS

//放手后吸附右侧
    async buttonEnd(this: This, e: wx.TouchEndEvent) {
      let offset = this.props.windowWidth - this.props.eleWidth - 10;
      let animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      });
      animation.left(offset).step({ duration: 300 });
      this.setState({
        animation: animation.export(),
      });
    },

HTML

          <image
            catchtouchmove={this.buttonMove}
            catchtouchstart={this.buttonStart}
            c