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

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

给像我这样的新手的注意事项：要为其他东西制作动画，您需要将其包装在 <Animated.SOMETHING> 中才能正常工作。否则编译器会对该转换属性感到恐慌：

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

但对于图像（Animated.Image）来说，上面的例子是 100% 好的并且是正确的。