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

最新推荐文章于 2023-08-02 11:18:37 发布

Sallywa

最新推荐文章于 2023-08-02 11:18:37 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/sallywa/article/details/100078797

版权

1. creatAnimation.left 动效不能清除

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

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

//放手后吸附右侧
    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}
            catchtouchend={this.buttonEnd}
            animation={this.data.animation}
            style={`top:${this.data.buttonTop * 2}rpx;left:${this.data
              .buttonLeft * 2}rpx;`}
          />
        )}

坑1—— creatAnimation.left/right 的动画效果不能清除

我发现在给小球添加动画之后，这个小球从此以后都会带上这个动画效果，所以在第二次拖动小球的时候它并不会即时的跟动手指的位置而会以之前的动态效果状态来跟动手指的位置。
在这里插入图片描述
我试过在动画设置的setDate的回调函数中，重新赋值一个duration为0的animation给小球，然而并不可行，小球在第二次拖动后会失去动画效果。

解决办法 在tapStart事件中设置duration 为0的animation给小球，本质上是给小球添加一个没有效果的动画，但是这样能够把之前的吸附动效覆盖～

    buttonStart(this: This, e: wx.TouchStartEvent) {
      let animation = wx.createAnimation({
        duration: 0,
        timingFunction: 'step-end',
      });
      animation.step({ duration: 0 });
      this.setData({
        animation: animation.export(),
      });
      this.props.startPoint = e.touches[0];
    },