使用淡入淡出来自布尔值的动画更改背景颜色视图

Question

我使用布尔值来确定视图的backgroundColor

const selectColor = isSelected ? "#8bc34a" : "#e9e9e9";

...

<TouchableOpacity onPress={toggleSelection}>
 <View style={{ backgroundColor: selectColor }}>
 </View>
</TouchableOpacity>

我希望这个颜色开关使用Animated API

的FadeIn动画进行更改

主要问题是，我的inputRange是一个布尔值。

感谢您的时间。

Answer 1

这是你想要的吗？

您可以为opacity对象的style属性设置动画。您的背景颜色为View的主#e9e9e9和背景颜色为Animated.View的嵌套#8bc34a，但最初不透明度为0，切换时，不透明度变为1，上面Gif的代码是：

class TestScreen extends Component {
    constructor(props) {
        super(props);

        this.opacity = new Animated.Value(0);

        this.toggleBackgroundColor = this.toggleBackgroundColor.bind(this);
    }

    toggleBackgroundColor() {
        Animated.timing(this.opacity, {
            toValue: this.opacity._value ? 0 : 1,
            duration: 1000
        }).start();
    }

    render() {
        return (
            <View
                style={{
                    flex: 1, justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#8BC34A'
                }}
            >
                <TouchableOpacity
                    style={{ borderWidth: 1, borderColor: '#4099FF', zIndex: 1 }}
                    onPress={this.toggleBackgroundColor}
                >
                    <Text style={{ fontSize: 18, color: '#4099FF', margin: 16 }}>
                        Toggle
                    </Text>
                </TouchableOpacity>
                <Animated.View
                    style={{
                        position: 'absolute',
                        left: 0, right: 0, bottom: 0, top: 0,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#E9E9E9',
                        opacity: this.opacity
                    }}
                />
            </View>
        );
    }
}

export default TestScreen;