gpt4 book ai didi

animation - react native : Triggering Animation on hide

转载 作者:行者123 更新时间:2023-12-03 14:29:39 24 4
gpt4 key购买 nike

我有一个控制子元素呈现的元素。 (一个TouchableHighlight,它在onPress中设置了一些状态。)在子元素的componentDidMount方法中,我构造了一个Animated.spring并对其进行start。这适用于输入,但是我需要反向执行相同的动画才能退出(就像抽屉一样)。 componentWillUnmount的执行速度太快,以至于Animated.spring甚至无法开始工作。

我将如何为 child 的导出设置动画?

最佳答案

我实现了一个FadeInOut组件,当其isVisible属性更改时,该组件将对组件进行动画制作。之所以这样做,是因为我想避免显式处理应随动画一起进入/退出的组件中的可见性状态。

<FadeInOut isVisible={this.state.someBooleanProperty} style={styles.someStyle}>
<Text>Something...</Text>
</FadeInOut>

此实现使用延迟淡入淡出,因为我使用它来显示进度指示器,但是您可以将其更改为使用所需的任何动画,也可以将其概括化以接受动画参数作为 Prop :
'use strict';

import React from 'react-native';

const {
View,
Animated,
PropTypes
} = React;

export default React.createClass({
displayName: 'FadeInOut',
propTypes: {
isVisible: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
style: View.propTypes.style
},

getInitialState() {
return {
view: this.props.children,
opacity: new Animated.Value(this.props.isVisible ? 1 : 0)
};
},

componentWillReceiveProps(nextProps) {
const isVisible = this.props.isVisible;
const shouldBeVisible = nextProps.isVisible;

if (isVisible && !shouldBeVisible) {
Animated.timing(this.state.opacity, {
toValue: 0,
delay: 500,
duration: 200
}).start(this.removeView);
}

if (!isVisible && shouldBeVisible) {
this.insertView();
Animated.timing(this.state.opacity, {
toValue: 1,
delay: 500,
duration: 200
}).start();
}
},

insertView() {
this.setState({
view: this.props.children
});
},

removeView() {
this.setState({
view: null
});
},

render() {
return (
<Animated.View
pointerEvents={this.props.isVisible ? 'auto' : 'none'}
style={[this.props.style, {opacity: this.state.opacity}]}>
{this.state.view}
</Animated.View>
);
}
});

关于animation - react native : Triggering Animation on hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35008905/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com