Jetpack ComposeでBottomSheet 内の画面遷移アニメーションが斜めになる問題

何が起きていたか

ModalBottomSheet の中に NavHost を置いて画面遷移すると、斜めにスライドするアニメーションが発生していました。

原因

画面ごとにヘッダーの内容が異なるため、自前ヘッダーを持つ画面ではホストの共有ヘッダーを AnimatedVisibility で非表示にしていました。この切り替えが遷移中に動いてしまうことで、 2つのアニメーションが同時に走るのが原因です。

この切り替えが遷移中に動いてしまうことで、2つのアニメーションが同時に走るのが原因です。

例：
NavHost の遷移 → 水平方向にスライド
AnimatedVisibility → ヘッダーが 0dp → 60dp に縦に伸びる

この2つが合成されて斜め移動になります。

修正

「ヘッダーは常に 60dp で固定描画する」 に統一しました。

// 修正前: ルートによってヘッダーが出たり消えたり                                     
AnimatedVisibility(visible = currentRoute !in SELF_MANAGED_ROUTES) {                  
   SheetHostTopBar(...)
}                                                                                     

// 修正後: 常に表示、サイズ固定                                                       
SheetHostTopBar(...)
                                                                                      
各画面は showHeader = false を渡して内部のヘッダーを非表示にするだけです。画面固有のア
クション（編集ボタンなど）はホスト側に state を引き上げて TopBar に渡します。
                                                                                      
composable(ROUTE_SCHEDULE) {                                                        
    ScheduleSettingsScreen(showHeader = false, ...)
}     

まとめ

NavHost 内の遷移中に AnimatedVisibility でサイズが変化するコンポーネントがあると、アニメーションが合成されてガタつく原因になります。BottomSheet 内にヘッダーを置く場合は、サイズを固定したまま中身だけ切り替えるのがスムーズです。