javascript - react native : How do you animate the rotation of an Image?

Question

旋转是一种样式转换，在 RN 中，您可以像这样旋转

  render() {
    return (
      <View style={{transform:[{rotate: '10 deg'}]}}>
        <Image source={require('./logo.png')} />
      </View>
    );
  }

但是，要在 RN 中制作动画，您必须使用数字，而不是字符串。您仍然可以在 RN 中制作变换动画，还是我必须想出某种 Sprite 表并以某些 fps 更改图像 src？

Answer 1

您实际上可以使用 interpolate 方法为字符串设置动画。 interpolate 采用一系列值，通常 0 到 1 适用于大多数情况，并将它们插入到一系列值中(这些值可以是字符串、数字，甚至是返回值的函数)。

您要做的是采用现有的动画值并将其传递给像这样的插值函数:

spinValue = new Animated.Value(0);

// First set up animation 
Animated.timing(
    this.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear, // Easing is an additional import from react-native
    useNativeDriver: true  // To make use of native driver for performance
  }
).start()

// Next, interpolate beginning and end values (in this case 0 and 1)
const spin = this.spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
})

然后像这样在你的组件中使用它:

<Animated.Image
  style={{transform: [{rotate: spin}] }}
  source={{uri: 'somesource.png'}} />

如果您想在循环中进行旋转，则在 Animated.loop 中添加 Animated.timing

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