小程序怎么实现movable回弹到指定位置

小程序中的movable组件可以通过设置属性来实现回弹到指定位置的效果。具体步骤如下：

1. 获取movable组件的位置信息，包括x、y坐标和宽高等信息。

2. 根据需要回弹的位置，计算出movable需要移动的距离。

3. 在movable组件的touchend事件中，通过动画效果将movable移动到指定位置。

以下是示例代码：

<view class="container">
  <movable-view 
    x="{{x}}" 
    y="{{y}}" 
    direction="all" 
    damping="50" 
    friction="2"
    bindtouchend="onTouchEnd">
    <view class="content">
      movable-view
    </view>
  </movable-view>
</view>

Page({
  data: {
    x: 0,
    y: 0,
    targetX: 100, // 目标位置 x 坐标
    targetY: 100, // 目标位置 y 坐标
  },

  onLoad: function () {
    const query = wx.createSelectorQuery()
    query.select('#movable').boundingClientRect(res => {
      this.setData({
        x: res.left,
        y: res.top
      })
    }).exec()
  },

  onTouchEnd: function (e) {
    const {x, y, targetX, targetY} = this.data
    const deltaX = targetX - x
    const deltaY = targetY - y
    wx.createAnimation({
      duration: 300,
      timingFunction: 'ease-in-out'
    }).translate(deltaX, deltaY).step({
      duration: 300,
      timingFunction: 'ease-in-out'
    })
    this.setData({
      animationData: animation.export(),
      x: targetX,
      y: targetY
    })
  }
})

在上面的示例代码中，我们通过在onLoad函数中获取movable组件的位置信息，并将其保存到data中。

在onTouchEnd函数中，根据目标位置和当前位置计算出需要移动的距离，并通过wx.createAnimation创建一个动画对象。最后通过this.setData更新movable组件的位置信息和动画效果即可实现回弹到指定位置的效果。