React Native Reanimated点击旋转动画仅生效一次问题排查

问题原因 #

• 动画触发逻辑无双向切换：第一次点击后你将animation共享值固定设为了500，后续点击没有把值改回初始状态，共享值未发生变化自然不会触发后续动画
• 插值映射逻辑不符合需求：你设置的interpolate输入范围为[0,180]，但给共享值赋值到500，超出范围后插值结果会被固定为上限65度，既达不到预期的180度旋转效果，映射关系也完全错位
• 冗余的中转配置：不需要额外用useDerivedValue做插值中转，直接在useAnimatedStyle里计算旋转角度即可

修复方案 #

逻辑代码 #

const animation = useSharedValue(0);
const [showDetail, setShowDetail] = useState(false);

const animationStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {
        // 直接映射0→0度，1→180度，满足旋转需求
        rotate: `${animation.value * 180}deg`,
      },
    ],
  };
});

const startAnimation = () => {
  const newState = !showDetail;
  setShowDetail(newState);
  // 根据状态切换共享值，双向触发动画
  animation.value = withTiming(newState ? 1 : 0, {
    duration: 300,
  });
};

组件调用代码 #

无需修改，保持原有写法即可：

<Animated.View style={[animationStyle]}>
  <Icons/>
</Animated.View>

如果你需要使用interpolate实现更复杂的多段动画，可以参考如下写法：

const rotation = useDerivedValue(() => {
  return interpolate(animation.value, [0, 1], [0, 180]);
});

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