web-dev-qa-db-fra.com

React Natif: Comment animez-vous la rotation d'une image?

La rotation est une transformation de style et dans RN, vous pouvez faire pivoter des choses comme celle-ci.

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

Cependant, pour animer des choses dans RN, vous devez utiliser des nombres, pas des chaînes. Pouvez-vous toujours animer des transformations dans RN ou dois-je trouver une sorte de feuille Sprite et modifier l'image src à quelques ips?

javascriptreact-nativeanimationrotationtransform
33
MiLeung

Vous pouvez réellement animer des chaînes en utilisant la méthode interpolate. interpolate prend une plage de valeurs, généralement comprise entre 0 et 1, et les interpole en une plage de valeurs (il peut s'agir de chaînes, de nombres et même de fonctions renvoyant une valeur).

Ce que vous feriez serait de prendre une valeur animée existante et de la transmettre à travers la fonction interpoler 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']
})

Puis utilisez-le dans votre composant comme ceci:

<Animated.Image
  style={{transform: [{rotate: spin}] }}
  source={{uri: 'somesource.png'}} />
92
Nader Dabit

N'oubliez pas d'ajouter la propriété seNativeDriver pour vous assurer d'obtenir les meilleures performances possibles de cette animation:

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