Question

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

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

但是，要在RN中制作动画，您必须使用数字，而不是字符串。您是否仍然可以在RN中进行变换动画，或者我是否需要提供某种精灵表并在某些fps处更改Image src？

Answer 1

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

您要做的是获取现有的Animated值并将其传递给插值函数，如下所示：

spinValue = new Animated.Value(0)

// First set up animation 
Animated.timing(
    this.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear
  }
).start()

// Second 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'}} />

Answer 2

不要忘记添加属性 useNativeDriver ，以确保您获得此动画的最佳效果：

// First set up animation 
Animated.timing(
    this.state.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
  }
).start();

Answer 3

给像我这样的新手的注意事项：要为其他内容设置动画，您需要将其包装在中才能使其工作。否则编译器会在该转换属性上恐慌：

import {Animated} from 'react-native';
...
//animation code above
...
<Animated.View style={{transform: [{rotate: spin}] }} >
   <YourComponent />
</Animated.View>

但是对于图像 (Animated.Image)，上面的示例是 100% 好的和正确的。

React Native：你如何动画图像的旋转？

3 个答案: