web-dev-qa-db-fra.com

Couleur d'arrière-plan de l'animation dans React Native

Comment puis-je procéder pour animer d’une couleur à une autre dans React Native. J'ai découvert qu'en interpolant un Animated.Value, vous pouvez animer des couleurs en:

var BLACK = 0;
var RED = 1;
var BLUE = 2;

backgroundColor: this.state.color.interpolate({
  inputRange: [BLACK, RED, BLUE],
  outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)']
})

et

Animated.timing(this.state.color, {toValue: RED}).start();

Mais en utilisant cette méthode, passant de NOIR à BLEU, vous devez passer par le rouge. Ajoutez plus de couleurs au mélange et vous vous retrouverez dans une discothèque des années 1980.

Y a-t-il une autre façon de faire qui vous permet de passer directement d’une couleur à l’autre?

javascriptreact-native
45
nicholas

Étant donné que vous avez Animated.Value _, disons x, vous pouvez interpoler une couleur comme ceci:

render() {
    var color = this.state.x.interpolate({
        inputRange: [0, 300],
        outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
    });

    return (
        <Animated.View style={{backgroundColor:color}}></Animated.View>
    );
}

Vous trouverez un exemple complet dans le numéro que j'ai posté sur github .

50
neciu

Si vous pouviez obtenir la couleur de la valeur de la couleur animée au moment où vous avez appuyé sur le bouton, vous pourriez probablement le faire. Quelque chose comme ça :

var currentColor = ? : 
this.state.color = 0; 
var bgColor = this.state.color.interpolate({
  inputRange: [0, 1],
  outputRange: [currentColor, targetColor]
});

Donc, pour chaque bouton, vous définissez un targetColor différent.

6
cmrichards