React Native:如何为图像的旋转设置动画?

2022-01-16 00:00:00 animation rotation transform javascript react-native

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

Rotation is a style transform and in RN, you can rotate things like this

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

但是，要在 RN 中制作动画，您必须使用数字，而不是字符串.你还能在 RN 中为变换设置动画，还是我必须想出某种 sprite sheet 并以某些 fps 更改 Image src?

However, to animate things in RN, you have to use numbers, not strings. Can you still animate transforms in RN or do I have to come up with some kind of sprite sheet and change the Image src at some fps?

推荐答案

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

You can actually animate strings using the interpolate method. interpolate takes a range of values, typically 0 to 1 works well for most things, and interpolates them into a range of values (these could be strings, numbers, even functions that return a value).

你要做的是获取一个现有的 Animated 值并将其传递给 interpolate 函数，如下所示:

What you would do is take an existing Animated value and pass it through the interpolate function like this:

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']
})

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

Then use it in your component like this:

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

如果你想在循环中进行旋转，那么在 Animated.loop

In case if you want to do the rotation in loop, then add the Animated.timing in the Animated.loop

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

相关文章