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

时间:2016-05-25 18:34:16

标签: javascript react-native animation rotation transform

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

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

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

3 个答案:

答案 0 :(得分:84)

您实际上可以使用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'}} />

答案 1 :(得分:27)

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

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

答案 2 :(得分:1)

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

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

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