Question

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

不仅 MenuBtn 动画，还有文本组件（“标题”）。
第一个安装动画不是弹簧类型，而是以褪色的方式。但 showMenu（）以spring类型设置动画。

我在这里缺少什么？如何在加载时弹出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更改进行动画处理＆＃34;。

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

对于像这样的简单转换，我建议使用优秀的react-native-animatable库，这使得条目转换就像将元素包装在Animatable.View中并指定许多可用转换之一一样简单： / p>

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

在组件安装后响应原生LayoutAnimation弹簧动画

1 个答案: