reactjs - React Native 旋转动画

Question

我正在尝试使用钩子创建动画，但我的代码有问题。有谁能够帮我？我测试时没有出现错误，但图像没有出现。我正在尝试让图片在我的加载屏幕上旋转。

export default function SplashLoading() {
  const [rotateValue, setRotateValue] = useState(new Animated.Value(0));
  useEffect(() => {
    StartImageRotate();
  }, []);

  function StartImageRotate() {
    rotateValue.setValue(0);

    Animated.timing(rotateValue, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start(() => StartImageRotate());
  }

  const RotateData = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"],
  });

  return (
    <Container>
      <Animated.Image
        style={{
          height: 230,
          transform: [{ rotate: RotateData }],
          width: 250,
        }}
        source={{ uri: "./gear.png" }}
      />
    </Container>
  );
}

Answer 1

我试图使用钩子进行图像旋转，所以我在类组件中遇到了这个图像旋转，原来问题在于我们如何提供图像源

<Animated.Image
    style={{
      height: 230,
      transform: [{ rotate: RotateData }],
      width: 250,
    }}
    source={{ uri: "./gear.png" }}
  />

而不是使用 uri，而是在顶部导入图像，然后在 Animated.Image 中使用它

import GearPng from './gear.png";


<Animated.Image
    style={{
      height: 230,
      transform: [{ rotate: RotateData }],
      width: 250,
    }}
    source={GearPng}
  />

旁注：您可以将Animated.timing内部包裹起来，Animated.loop使其不断重复

Animated.loop(
  Animated.timing(rotateValue, {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true,
  })
 ).start();
};