0

我有一个带有变换和绝对位置的视图，我想将视图位置设置为它的变换，然后激活一个 layoutAnimation。

意思是，我想设置一个view位置为X，位置设置好后，配置一个layoutAnimation，将它的位置设置为Y。

class someComponent extends React.Component {
    state: {
        transform: 100,
        top: 0
    }

    someFunction = () => {
        this.setState({ top: this.state.transform, transform: 0 });
        LayoutAnimation.configureNext(  someAnimationConfig );
        this.setState({ top: 500 });
    }

    render = () => {
        return(
            <View style={
                someStyles, 
                {
                    transform: [ { translateY: this.state.transform } ],
                    top: this.state.top
                } 
            }>
            
            </View>
        )
    }

}

调用时想要的行为someFunc是视图将其位置设置为其变换并重置其变换（这纯粹是技术性的，没有视觉效果），然后启动动画

我怀疑这没有发生的原因是因为动画仅在渲染时触发，并且由于我连续两次更改状态，因此这两次更改都发生在render调用之前，并且位置仅更新一次。

解决我的问题的另一种方法是离开转换，并将屏幕移动到(wantedPosition - currentTransform)，但这看起来很难看，如果有更干净更优雅的方式来处理这种情况，我正在徘徊

我做所有这些都是为了实现一个可滑动的视图，我宁愿不使用额外的库或依赖项

一些我试过的员工

  • 在第一个 setState 的回调中调用第二个 set state 和动画配置，相同的行为

  • didAnimationFinish添加两个 LayoutAnimatiom，将第一个动画设置为“即时”（延迟为 0），并在第一个 setState 之后调用它，并在回调中使用第二个 setState 调用第二个。这个接近工作了，但问题是第一个动画不是即时的，你不能设置延迟为 0，当设置延迟为 1 时，你可以看到位置为 0 的视图和一帧的变换 0，之后第一个动画完成在第二个动画开始之前有一个小的延迟。尽管我相信有一种方法可以消除第二个动画之前的小延迟，但你仍然会有一个“错误”的帧

4

0 回答 0