微信小程序拖动手势的实现

首先来看下效果图：

代码实现如下:

<view class="container" style="position: relative">
    <button animation="{{animationData}}" catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="position: absolute;top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 100px;height: 40px">button</button>
</view>

var startPoint;
Page({
  data:{
    animationData:{},
    buttonTop:0,
    buttonLeft:0
  },
onShow:function(){
  this.animation = wx.createAnimation({
        duration: 0,
        timingFunction: 'ease',
    })
},
// button拖动的三个方法
  buttonStart: function(e){
    startPoint = e.touches[0]
  },
   buttonMove: function(e){
    var endPoint = e.touches[e.touches.length-1]
    this.animation.translate(endPoint.clientX - startPoint.clientX, endPoint.clientY - startPoint.clientY).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
   buttonEnd: function(e){
     console.log(e);
     var endPoint = e.changedTouches[0]
    this.setData({
      buttonTop:(endPoint.clientY-20),
      buttonLeft:(endPoint.clientX-50)
    })
  }
})``` 
注：还有一点瑕疵，在拖动结束时，会有稍微波动，哪位大神懂了还望跟我说一下啊