0

変換と絶対位置を持つビューがあり、ビューの位置をその変換に設定してから、layoutAnimation をアクティブにしたいと考えています。

つまり、ビューの位置を 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は、その位置をその変換に設定し、その変換をリセットして (これは純粋に技術的であり、視覚効果はありません)、アニメーションを開始することです。

これが発生していないと思われる理由は、アニメーションがレンダリング時にのみトリガーされ、状態を 2 回続けて変更するため、両方の変更がrender呼び出される前に発生し、位置が 1 回だけ更新されるためです。

私の問題を解決する別の方法は、変換を残して画面をに移動する(wantedPosition - currentTransform)ことですが、それは醜いようで、この状況に対処するためのよりクリーンでエレガントな方法があるかどうか迷っていました

スワイプ可能なビューを実装するためにこれをすべて行っていますが、追加のライブラリや依存関係として使用したくありません

何人かのスタッフが試しました

  • 最初の setState のコールバックで 2 番目のセット状態とアニメーション構成を呼び出す、同じ動作

  • 2 つの LayoutAnimatioms を追加し、最初のアニメーションを「インスタント」(遅延 0) に設定し、最初の setState の後にそれを呼び出し、didAnimationFinishコールバックで 2 番目の setState を使用して 2 番目のアニメーションを呼び出します。これはほとんど機能していましたが、問題は最初のアニメーションがインスタントではなかったことです。遅延を 0 に設定することはできません。遅延を 1 に設定すると、位置 0 のビューが表示され、1 フレームの変換が 0 になり、その後最初のアニメーションが終了すると、2 番目のアニメーションが開始するまでに少し時間がかかります。2番目のアニメーションの前の小さな遅延を取り除く方法があると信じていますが、「バグのある」フレームが1つ残っています

4

0 に答える 0