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

我试图使用挂钩进行图像旋转，所以遇到了image rotation in class component，事实是问题出在我们如何提供图像源

<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();
};

反应原生旋转动画

1 个答案: