React Native-Animated.spring在恢复动画时闪烁 [英] React Native - Animated.spring blinks when reverting the animation
本文介绍了React Native-Animated.spring在恢复动画时闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的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屋!
查看全文