javascript - 平滑向上滑动动画(React Native Animation)

Question

我希望做什么:

向上滑动即可关闭的模态屏幕。

在模态框内我有:

 componentWillMount() {
    this.animated = new Animated.Value(0);

    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,

        onPanResponderMove: (e, gestureState) => {
            const { dy } = gestureState;
            if(dy < 0) {
                this.animated.setValue(dy);
            }
        },

        onPanResponderRelease: (e, gestureState) => {
            const { dy } = gestureState;

            if(dy < -100) { // Swipe up away
                Animated.timing(this.animated, {
                    toValue: -400,
                    duration: 150
                }).start();
                this.props.hideModal();
                this.doSomething();
            } else if(dy > -100 && dy < 0) { // Swipe back to initial position
                Animated.timing(this.animated, {
                    toValue: 0,
                    duration: 150
                }).start();
            }
        }
    })
}

通过单击父组件中的按钮出现此模态框。默认情况下，该父项中有一个状态值 showModal : false。打开模式时，此状态更改为 true，关闭时更改为 false。

目前的主要问题是，当您滑动关闭此模态框时，它不会顺利上升并消失。它上升到 100 像素，停在一个地方并开始消失。

如果删除 this.props.hideModal() 这个 Modal 会平滑地上升到屏幕顶部并按我的意愿消失，但它没有完全关闭并且之后你不能点击任何其他按钮。

基本上，我需要在动画完成后运行this.props.hidModal()。

如何实现模态框的平滑关闭？我希望我能理解地描述我的问题。

Answer 1

如果在动画完成后调用 this.props.hideModal() 是解决方法(我相信是这样)，您可以将其作为回调传递给 .start()。

Animated.timing({..}).start(this.props.hideModal)