响应本机布局组件安装后的动画弹簧动画

Question

当组件（MenuBtn）挂载时，我想以弹簧弹出的方式将按钮的大小从0增加到50。但相反，我不得不遇到问题：

1. 不仅MenuBtn动画，还有文本组件（"标题"）。

2. 第一个安装动画不是弹簧类型，而是以一种褪色的方式。但是 showMenu（） 以弹簧类型进行动画处理。

我在这里错过了什么？如何使 MenuBtn 在加载时仅弹出，而不是所有组件。

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.header}>Heading</Text>
                <View style={styles.wrapper}>
                    <MenuBtn/>
                </View>
            </View>
        )
    }
}
class MenuBtn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            radius: 0,
            degree: '0deg',
        };
    }
    componentDidMount() {
        LayoutAnimation.spring();
        this.setState({
            radius: 50,
        });
    }
    showMenu = () => {
        LayoutAnimation.spring();
        this.setState({
            radius: this.state.radius == 60 ? 50 : 60,
            degree: this.state.degree == '45deg' ? '0deg' : '45deg',
        })
    };
    render() {
        return (
            <TouchableWithoutFeedback onPress={this.showMenu}>
                <View style={{ width: this.state.radius, height: this.state.radius, borderRadius: this.state.radius/2, transform: [{rotateZ: this.state.degree}],}}>
                    <Icon name="plus" size={30} color="white"/>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

Answer 1

LayoutAnimation API 使用简单，但没有提供很多可定制性。 当您调用 LayoutAnimation.spring() 或任何其他 LayoutAnimation 方法时，您实际上是在说"对此呈现周期中发生的所有 UI 更改进行动画处理"。

相反，您可以使用动画 API 来更好地控制动画的类型和目标。因为它是较低级别的 API，所以这需要更多的代码。

对于像这样的简单过渡，我建议使用出色的 react-native-animatable 库，它使入口过渡就像将元素包装在Animatable.View中并指定众多可用过渡之一一样简单：

<Animatable.View animation='bounceIn'>
  // your component
</Animatable.View>