反应原生动画.弹簧不能顺利工作

Question

i'am使用React Native Animated 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

尝试使用useNativeDriver: true。现在，您的动画在JS线程中运行，可能会被JS代码中的其他内容所阻止。这将将动画移至UI线程。

请参阅文档以获取参考。