React Native-Animated.spring在恢复动画时闪烁 [英] React Native - Animated.spring blinks when reverting the animation

问题描述

在我的React Native应用中，我试图创建一个抽屉.当我单击一个按钮时，它应该打开，并且工作得很好，问题出在我将其关闭时.当我单击关闭按钮时，动画闪烁，有点像在确定关闭之前打开和关闭2-3次.

In my react native app I'm trying to create a drawer. When I click a button it should open, and that works perfectly fine, the problem is when I close it. When I click the close button the animation blinks, kind of like opening and closing for 2-3 times before it definitely closes.

这就是我的做法

export default class Drawer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: new Animated.Value(0)
        }
    }

    showContent = () => {
        Animated.spring(this.state.height, {toValue:130}).start();
    }

    hideContent = () => {
        Animated.spring(this.state.height, {toValue:0}).start();
    }

    render() {
        return (
            <View>
                <TouchableHighlight 
                    onPress={this.showContent}
                    underlayColor="transparent"
                >
                    <Text>Show</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    onPress={this.hideContent}
                    underlayColor="transparent"
                >
                    <Text>Hide</Text>
                </TouchableHighlight>

                <Animated.View style={{height: this.state.height}}>
                    <Text>Content</Text>
                </Animated.View>
            </View>
        );
    }
}

推荐答案

动画出现闪烁"的原因是因为您使用的是弹簧动画，一旦达到最终值，该动画就会后退或反弹.尝试用timing替换spring摆脱反弹:

The reason the animation appears to 'blink' is because you're using a spring animation which recoils or bounces once it reaches its final value. Try replacing spring with timing to get rid of the bounce:

showContent = () => {
    Animated.timing(this.state.height, {toValue:130}).start();
}

hideContent = () => {
    Animated.timing(this.state.height, {toValue:0}).start();
} 

这篇关于React Native-Animated.spring在恢复动画时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！