React Native 旋转动画

【问题标题】：React Native Rotate AnimationReact Native 旋转动画
【发布时间】：2020-01-19 16:16:01
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-native react-animated react-native-animatable react-animations

【解决方案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();
};

【讨论】：