在Reanimated中使用withSpring时如何设置动画时长与延迟？

问题 #

刚接触Reanimated，已实现部分动画效果，但无法为Y轴位移动画设置时长，也想添加延迟（时长设置优先级更高）。透明度动画的时长可以正常设置，但Y轴位置的时长无法调整，尝试修改damping、stiffness等弹簧参数也没改变实际时长。

当前代码实现：

const offset = useSharedValue(400);
const imgOpacity= useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  return { 
    transform: [
      {
        translateY: withSpring(offset.value, { mass: 0.1, damping: 100, stiffness: 100 }), 
      },   
    ],
    opacity: withTiming(imgOpacity.value, { duration: 1000 }),
  };
}); 

触发动画的代码：

React.useEffect(() => {
  if (show) {
    offset.value = withSpring(10);
    imgOpacity.value =1; 
  } else {
    // alert("No Show")
  }
}, [show]);

也曾尝试改用withTiming，但效果依旧：

const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
        translateY : withTiming(offset.value, {
        duration: 1,
        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
      }),
        }, 
      ],
      opacity: withTiming(imgOpacity.value, { duration: 1000 }),
    };
  }); 

动画容器代码：

<Animated.View style={[animatedStyle]}>
        <Image style={styles.BImage} source={{ uri: imgb }} />
        <Image style={styles.AImage} source={{ uri: imga }} />
        <Image style={styles.CImage} source={{ uri: imgc }} />
</Animated.View>

解决方案 #

1. 修正动画函数的使用位置 #

核心错误：动画函数（withSpring/withTiming）应该用于修改sharedValue的赋值操作，而非在useAnimatedStyle里包裹sharedValue。

在useAnimatedStyle中直接使用动画函数会导致逻辑重复执行，无法正确响应参数设置。正确写法：

• 在useAnimatedStyle里直接返回sharedValue的当前值
• 触发动画时，用动画函数包裹目标值更新sharedValue

2. 控制Y轴位移动画的时长 #

方案一：用withTiming精准控制时长

如果需要严格控制动画时长，直接用withTiming替代withSpring，配置中可直接设置duration和delay：

const offset = useSharedValue(400);
const imgOpacity= useSharedValue(0);

// 样式中直接使用sharedValue，不包裹动画函数
const animatedStyle = useAnimatedStyle(() => {
  return { 
    transform: [{ translateY: offset.value }],
    opacity: imgOpacity.value,
  };
}); 

// 触发动画时配置参数
React.useEffect(() => {
  if (show) {
    // Y轴动画：时长1000ms，延迟200ms
    offset.value = withTiming(10, { 
      duration: 1000, 
      delay: 200,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1)
    });
    // 透明度动画：时长1000ms
    imgOpacity.value = withTiming(1, { duration: 1000 });
  } else {
    // 隐藏时的动画（可选）
    offset.value = withTiming(400, { duration: 800 });
    imgOpacity.value = withTiming(0, { duration: 800 });
  }
}, [show]);

方案二：用弹簧动画近似控制时长（保留弹簧效果）

withSpring是物理模拟动画，无直接duration参数，但可通过调整参数接近预期时长：

• 提高stiffness（刚度）会加快动画结束速度
• 提高damping（阻尼）会快速衰减弹簧波动
• 降低mass（质量）会让动画响应更迅速

若使用Reanimated 3+版本，还可通过withDurationWrap强制弹簧动画在指定时长内完成：

offset.value = withDurationWrap(
  withSpring(10, { stiffness: 200, damping: 30 }),
  1000 // 强制时长1000ms
);

3. 统一动画同步（可选） #

若希望透明度和Y轴动画完全同步，可用withParallel确保同时开始：

React.useEffect(() => {
  if (show) {
    withParallel([
      () => offset.value = withTiming(10, { duration: 1000, delay: 200 }),
      () => imgOpacity.value = withTiming(1, { duration: 1000, delay: 200 })
    ]);
  }
}, [show]);

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