# AnimationObject worklet.spring(number|string toValue, Object options, function callback)

小程序插件:不支持

相关文档: worklet 动画

# 功能描述

基于物理的动画。

# 参数

# number|string toValue

目标值

# Object options

动画配置

属性 类型 默认值 必填 说明
damping number 10 阻尼系数
mass number 1 重量系数,值越大移动越慢
stiffness number 100 弹性系数
overshootClamping boolean false 动画是否可以在指定值上反弹
restDisplacementThreshold number 0.01 弹簧静止时的位移
restSpeedThreshold number 2 弹簧静止的速度
velocity number 0 速度

# function callback

动画完成回调。动画被取消时,返回 fasle,正常完成时返回 true。

# 返回值

# AnimationObject

返回 AnimationObject 类型值,可直接赋值给 SharedValue

# 示例代码


<pan-gesture-handler onGestureEvent="handlepan">
  <view class="circle"></view>
</pan-gesture-handler>
</code>

<code>
const { shared, spring } = wx.worklet
Page({
  onLoad() {
    const offset = shared(0);
    this.applyAnimatedStyle(".circle", () => {
      "worklet";
      return {
        transform: `translateX${offset.value}px`,
      };
    });
    this._offset = offset;
  },
  handlepan(evt) {
    "worklet";
    if (evt.state === GestureState.ACTIVE) {
      this._offset.value += evt.deltaX;
    } else if (evt.state === GestureState.END) {
      this._offset.value = spring(0);
    }
  },
});