Animazione backgroundColor in React Native

Question

Come passare all'animazione da un colore a un altro in React Native. Ho scoperto che interpolando un Animated.Value è possibile animare i colori da:

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)'] 
}) 

e

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

Ma con questo metodo, passando dal nero al blu, si deve passare attraverso rosso. Aggiungi più colori al mix e finisci in una discoteca degli anni '80.

C'è un altro modo per farlo che ti permette di passare direttamente da un colore all'altro?

Grazie.

Answer 1

Se si riuscisse a ottenere il colore del valore del colore animato nell'istante in cui si è premuto il pulsante, probabilmente si potrebbe farlo. Qualcosa del genere:

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

Quindi per ogni pulsante si imposta un diverso targetColor.

Answer 2

Dato avete Animated.Value Diciamo x, è possibile interpolare il colore in questo modo:

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

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

Si possono trovare piena esempio funzionante nel numero che ho postato su github.

Answer 3

Utilizzare setValue e lo stato per controllare i colori di inizio e fine.

Answer 4

È possibile anche interpolare nei passaggi, per i valori non numerici come il colore, come questo:

<Animated.Text 
    style={{ 
    color: colorAnim.interpolate({ 
     inputRange: [0, 0.5, 1], 
     outputRange: ['black', 'gray', 'white'] 
    }) 
    }}>