React Native: comment animer la rotation d'une Image?
la Rotation est une transformation de style et dans RN, vous pouvez faire tourner des choses comme ça
render() {
return (
<View style={{transform:[{rotate: '10 deg'}]}}>
<Image source={require('./logo.png')} />
</View>
);
}
Cependant, pour animer les choses dans RN, vous devez utiliser des nombres, pas des chaînes. Pouvez-vous encore animer des transformations dans RN ou dois-je trouver une sorte de feuille sprite et changer l'Image src à certains fps?
2 réponses
vous pouvez en fait animer les chaînes en utilisant le interpolate méthode. interpolate prend une gamme de valeurs, typiquement 0 à 1 fonctionne bien pour la plupart des choses, et les interpolate dans une gamme de valeurs (ce pourrait être des chaînes, des nombres, même des fonctions qui renvoient une valeur).
ce que vous feriez est de prendre une valeur animée existante et de la passer à travers la fonction interpolate comme ceci:
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']
})
Ensuite l'utiliser dans votre composant comme ceci:
<Animated.Image
style={{transform: [{rotate: spin}] }}
source={{uri: 'somesource.png'}} />
malheureusement pas assez de réputation pour commenter ci-dessus.
Très bon exemple. N'oubliez pas d'ajouter la propriété useNativeDriver pour vous assurer d'obtenir les meilleures performances de cette animation:
// First set up animation
Animated.timing(
this.state.spinValue,
{
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true
}
).start();