首先来看下效果图：
代码实现如下:
<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)
})
}
})```
注：还有一点瑕疵，在拖动结束时，会有稍微波动，哪位大神懂了还望跟我说一下啊