反应原生动画中的动画只工作一次答案

【问题标题】：animation in react native reanimated animation only works once反应原生动画中的动画只工作一次
【发布时间】：2021-11-07 21:36:39
【问题描述】：

我有一个 Pressable 组件，里面有一个图标。我想按下它并将它旋转 180 度。但动画只运行一次。当我再次单击时，没有任何反应。

const animation = useSharedValue(0);

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

  const animationStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotate: rotation.value + "deg",
        },
      ],
    };
  });

  const startAnimation = () => {
    setShowDetail(!showDetail);
    animation.value = withTiming(500, {
      duration: 300,
    });
  };

在组件中

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

【问题讨论】：

标签： react-native react-animated react-native-reanimated

【解决方案1】：

那是因为它一次又一次地从 0 旋转到 180。因为旋转值是固定的。您应该使用 useState 更新旋转值。

const [rotationValue, setRotationValue] = useState(0);

const handleClickRotate = () => {
    setRotationValue(p => p + 180); // you can use other deg value
}

并使用 rotationValue 为您的组件设置动画。 :D

【讨论】：