Question

我正在使用反应原生动画API从左到右平稳过渡。这是我的初始状态

constructor(props) {
        super(props);
        this.state = {
            isDrawerOpened: false,
            left: new Animated.Value(-100)
        };
        this.setDrawer = this.setDrawer.bind(this);
    }

当componentDidMount调用

时，它仍然正常工作

componentDidMount() {
        Animated.spring(this.state.left, {toValue: 200}).start();
    }

但是当我正在使用事件来改变状态（也开始动画）时。过渡变得粗糙（不平滑）。这是我的事件代码

setDrawer() {
        this.setState({
            isDrawerOpened: !this.state.isDrawerOpened
        });

        if (this.state.isDrawerOpened) {
            this.setState({
                left: new Animated.Value(200)
            });
            Animated.spring(this.state.left, {toValue: -100, speed: 1000}).start();
        } else {
            this.setState({
                left: new Animated.Value(-100)
            });
            Animated.spring(this.state.left, {toValue: 200, speed: 1000}).start();
        }
    }

任何人都可以解决这个问题:(抱歉我的英文不好

Answer 1

尝试前往@media print { body { position: relative; } #footer { position: absolute; bottom: 0; } }。您的动画现在在JS线程中运行，可能会被JS代码中的其他内容阻止。这会将动画移动到UI线程。

请参阅docs以供参考。

反应原生Animated.spring并不顺利

1 个答案: