javascript - estilos - react native text

Animando backgroundColor en React Native

Question

¿Cómo voy a animar de un color a otro en React Native? Descubrí que al interpolar un valor animado.Value puedes animar los colores de la siguiente manera:

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

y

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

Pero usando este método, pasando de NEGRO a AZUL, tienes que pasar por rojo. Agrega más colores a la mezcla y terminarás en una discoteca de los 80.

¿Hay alguna otra forma de hacer esto que te permita ir directamente de un color a otro?

Answer 1

Dado que tienes Animated.Value digamos x , puedes interpolar un color como este:

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>
    );
}

Puede encontrar un ejemplo completo de trabajo en el número que he publicado en github .

Answer 2

Si pudiera obtener el color del valor del color animado en el instante en que presionó el botón, probablemente podría hacerlo. Algo como esto :

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

Por lo tanto, para cada botón establecerías un targetColor diferente.

Answer 3

También puede interpolar en pasos, para valores no numéricos como el color, como este:

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

Answer 4

Use setValue y state para controlar los colores de inicio y fin.