旋转是样式转换,在RN中,您可以像这样旋转
render() {
return (
<View style={{transform:[{rotate: '10 deg'}]}}>
<Image source={require('./logo.png')} />
</View>
);
}
但是,要在RN中制作动画,您必须使用数字,而不是字符串。您是否仍然可以在RN中进行变换动画,或者我是否需要提供某种精灵表并在某些fps处更改Image src?
答案 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% 好的和正确的。