Анимированный backgroundColor в React Native

Как бы я начал анимацию из одного цвета в другой в React Native. Я обнаружил, что путем интерполяции Animated.Value вы можете анимировать цвета:

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

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

Но используя этот метод, переходя от BLACK к BLUE, вам нужно пройти красным. Добавьте больше цветов в микс, и вы окажетесь в дискотеке 1980-х годов.

Есть ли другой способ сделать это, что позволяет вам перейти прямо от одного цвета к другому?

Спасибо.

Ответ 1

Если у вас есть Animated.Value, скажем x, вы можете интерполировать цвет следующим образом:

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

Вы можете найти полный рабочий пример в выпуске, который я опубликовал на github.

Ответ 2

Если вы можете получить цвет анимированного значения цвета в тот момент, когда вы нажали кнопку, вы могли бы, возможно, сделать это. Что-то вроде этого:

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

Итак, для каждой кнопки вы устанавливаете другой targetColor.

Ответ 3

Используйте setValue и укажите цвет начала и конца.