Анимационный backgroundColor in React Native

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

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

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

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

Спасибо.

источник

2015-09-17 nicholas

В вашем примере ваше использование inputRange: [черный, красный, синий]. Если вы измените это на [ЧЕРНЫЙ, ГОЛУБОЙ], цвет одинаков от черного до синего, как вы ожидали? –

Это будет работать, но это противоположность тому, что мне нужно. Мне нужно добавить цвета в список и перейти от одного к другому в зависимости от действия пользователя. Итак, от BLACK до BLUE, затем от BLUE до GREEN, затем от GREEN до желтого, например. – nicholas

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

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

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

источник

2015-09-17 19:22:05 cmrichards

Учитывая у вас есть 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.

источник

2015-11-27 13:31:57 neciu

У самой новой версии с исправлением может быть ошибка: она пытается интерполировать этот код от белого до синего и получить ошибку «получил плохой реквизит» с «rgba (255,255,255,1)», где он ожидает «rgba (255,255,255,1.0)». Исследуя. –

А, я пытался добавить анимацию поверх приведенного выше примера кода и забыл использовать Animated.View вместо обычного View. Переключение на исправило мою проблему. –

-6

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

источник

2016-01-09 01:02:27 browniefed

Вы также можете интерполировать ступенчато, для нечисловых значений, таких как цвет, как это:

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

источник

2018-01-13 22:04:32

Анимационный backgroundColor in React Native

ответ

Смежные вопросы