Reanimated V2：如何用withSpring为对象类型共享值添加动画？

我正在React Native项目里用Reanimated V2开发可拖拽组件，定义了一个存储偏移量x、y坐标的对象类型共享值：

const offset = useSharedValue({x: 0, y: 0});

想要在用户释放拖拽对象这类手势事件触发时，给两个坐标加上弹簧动画。试了两种写法都出问题：

1. 类型错误写法：

offset.value = withSpring({x: 0, y: 0});

错误提示：

Type 'AnimatedValue' is not assignable to type '{x: number, y: number}'.

2. 运行时错误写法：

offset.value = {x: withSpring(0), y: withSpring(0)};

错误提示：

animation.callStart is not a function.

我希望通过共享值过渡实现动画，不想在useAnimatedStyle里定义动画（也就是不想用useAnimatedStyle(() => ({ transform: [{translateX: withSpring(offset.value.x)}, ...]}));这种写法）。请问有没有办法用withSpring为对象类型的共享值添加动画？

Reanimated V2 不支持直接对对象类型的共享值使用 withSpring 做整体动画，但可以通过以下方式实现需求：

方法1：拆分独立共享值（推荐） #

将x、y坐标拆分为两个单独的共享值，分别应用withSpring动画，这是最符合Reanimated设计逻辑的方案：

const offsetX = useSharedValue(0);
const offsetY = useSharedValue(0);

// 释放拖拽时触发复位动画
const handleRelease = () => {
  offsetX.value = withSpring(0);
  offsetY.value = withSpring(0);
};

后续使用偏移量时，直接取offsetX.value和offsetY.value即可，完全规避类型和运行时错误。

方法2：手动逐帧更新对象属性（不推荐） #

如果必须保留对象类型的共享值，可以利用withSpring的回调函数逐帧更新对象属性，但这种方式不符合Reanimated的类型约定，容易引发问题：

const offset = useSharedValue({x: 0, y: 0});

const handleRelease = () => {
  // 启动x轴动画，逐帧更新offset的x属性
  withSpring(0, undefined, (currentX) => {
    offset.value = {...offset.value, x: currentX};
    return true; // 返回true保持回调持续触发
  });
  // 同时启动y轴动画
  withSpring(0, undefined, (currentY) => {
    offset.value = {...offset.value, y: currentY};
    return true;
  });
};

这种方式依赖动画的回调逐帧更新，性能和稳定性不如拆分共享值的方案，仅作为特殊场景下的备选。

错误原因说明 #

• 第一种写法报错是因为withSpring返回的是AnimatedValue类型，而对象类型共享值期望的是普通{x: number, y: number}，类型不匹配。
• 第二种写法报错是因为Reanimated无法识别对象属性中的AnimatedValue，无法正确触发动画执行，导致callStart方法找不到。

内容的提问来源于stack exchange，提问作者hayata_suenaga