पृष्ठभूमि को एनिमेट करना प्रतिक्रिया मूल में

Question

मैं प्रतिक्रिया मूल में एक रंग से दूसरे रंग में एनिमेट करने के बारे में कैसे जाउंगा। मैंने पाया कि एक Animated.Value interpolating द्वारा आप से रंग चेतन कर सकते हैं:

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

लेकिन इस पद्धति का उपयोग, काले से नीले रंग के लिए जा रहा है, तो आप लाल के माध्यम से जाना है। मिश्रण में और रंग जोड़ें और आप 1 9 80 के डिस्को में खत्म हो जाते हैं।

क्या ऐसा करने का कोई और तरीका है जो आपको सीधे एक रंग से दूसरे रंग में जाने की अनुमति देता है?

धन्यवाद।

Answer 1

यदि आप तुरंत दबाए गए एनिमेटेड कलर वैल्यू का रंग प्राप्त कर सकते हैं तो आप बटन दबाएंगे तो आप शायद इसे कर सकते हैं। इस तरह कुछ:

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

तो प्रत्येक बटन के लिए आप एक अलग लक्ष्य रंग निर्धारित करेंगे।

Answer 2

को देखते हुए आप 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 पर पोस्ट किया है पर पूरा काम कर उदाहरण मिल सकते हैं।

Answer 3

setValue का उपयोग करें और प्रारंभ और अंत रंगों को नियंत्रित करने के लिए राज्य का उपयोग करें।

Answer 4

तुम भी चरणों में अंतर्वेशन सकते हैं, इस तरह रंग की तरह गैर-अंकीय मान, के लिए:

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