ภาพเคลื่อนไหวระหว่างปลายทาง

NavDisplay มีความสามารถในการแสดงภาพเคลื่อนไหวในตัวเพื่อสร้างการเปลี่ยนภาพอย่างราบรื่นเมื่อผู้ใช้ไปยังส่วนต่างๆ ของแอป คุณสามารถปรับแต่งภาพเคลื่อนไหวเหล่านี้ได้ทั่วโลกสำหรับ NavDisplay หรือตามแต่ละ NavEntry โดยใช้ข้อมูลเมตา

ลบล้างทรานซิชันเริ่มต้น

NavDisplay ใช้ ContentTransform เพื่อกำหนดลักษณะที่เนื้อหาเคลื่อนไหวระหว่างการไปยังส่วนต่างๆ คุณลบล้างลักษณะการทำงานของภาพเคลื่อนไหวเริ่มต้นได้โดยระบุพารามิเตอร์การเปลี่ยนไปยัง NavDisplay

  • transitionSpec: พารามิเตอร์นี้จะกำหนด ContentTransform ที่จะใช้เมื่อเพิ่มเนื้อหาลงในกองซ้อนที่ซ้อนกัน (กล่าวคือ เมื่อไปยังหน้าถัดไป)
  • popTransitionSpec: พารามิเตอร์นี้กำหนด ContentTransform ที่จะมีผลเมื่อนำเนื้อหาออกจากกองซ้อนที่ซ้อนกัน (กล่าวคือ เมื่อไปยังหน้าก่อนหน้า)
  • predictivePopTransitionSpec: พารามิเตอร์นี้กําหนด ContentTransform ที่จะนําไปใช้เมื่อเนื้อหาปรากฏขึ้นโดยใช้ท่าทางสัมผัสการกดกลับแบบคาดการณ์

ลบล้างการเปลี่ยนที่ระดับ NavEntry แต่ละรายการ

นอกจากนี้ คุณยังกำหนดภาพเคลื่อนไหวที่กำหนดเองสำหรับ NavEntry บางรายการได้โดยใช้ข้อมูลเมตา NavDisplay จดจำคีย์ข้อมูลเมตาพิเศษเพื่อใช้ทรานซิชันต่อรายการ ดังนี้

  • NavDisplay.transitionSpec: ใช้ฟังก์ชันตัวช่วยนี้เพื่อกำหนดภาพเคลื่อนไหวการนำทางไปข้างหน้า
  • NavDisplay.popTransitionSpec: ใช้ฟังก์ชันตัวช่วยนี้เพื่อกำหนดภาพเคลื่อนไหวการนำทางย้อนกลับสำหรับ NavEntry ที่เฉพาะเจาะจง
  • NavDisplay.predictivePopTransitionSpec: ใช้ฟังก์ชันตัวช่วยนี้เพื่อกำหนดภาพเคลื่อนไหวสำหรับท่าทางสัมผัสแบบคาดคะเนเพื่อกลับสำหรับ NavEntry ที่เฉพาะเจาะจง

การเปลี่ยนข้อมูลเมตาต่อรายการเหล่านี้จะลบล้างการเปลี่ยนข้อมูลเมตาส่วนกลางที่มีชื่อเดียวกันของ NavDisplay

ข้อมูลโค้ดต่อไปนี้แสดงทั้งการเปลี่ยน NavDisplay ระดับส่วนกลางและการลบล้างที่ระดับ NavEntry แต่ละรายการ

@Serializable
data object ScreenA : NavKey

@Serializable
data object ScreenB : NavKey

@Serializable
data object ScreenC : NavKey

class AnimatedNavDisplayActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            Scaffold { paddingValues ->

                val backStack = rememberNavBackStack(ScreenA)

                NavDisplay(
                    backStack = backStack,
                    onBack = { backStack.removeLastOrNull() },
                    entryProvider = entryProvider {
                        entry<ScreenA> {
                            ContentOrange("This is Screen A") {
                                Button(onClick = { backStack.add(ScreenB) }) {
                                    Text("Go to Screen B")
                                }
                            }
                        }
                        entry<ScreenB> {
                            ContentMauve("This is Screen B") {
                                Button(onClick = { backStack.add(ScreenC) }) {
                                    Text("Go to Screen C")
                                }
                            }
                        }
                        entry<ScreenC>(
                            metadata = NavDisplay.transitionSpec {
                                // Slide new content up, keeping the old content in place underneath
                                slideInVertically(
                                    initialOffsetY = { it },
                                    animationSpec = tween(1000)
                                ) togetherWith ExitTransition.KeepUntilTransitionsFinished
                            } + NavDisplay.popTransitionSpec {
                                // Slide old content down, revealing the new content in place underneath
                                EnterTransition.None togetherWith
                                    slideOutVertically(
                                        targetOffsetY = { it },
                                        animationSpec = tween(1000)
                                    )
                            } + NavDisplay.predictivePopTransitionSpec {
                                // Slide old content down, revealing the new content in place underneath
                                EnterTransition.None togetherWith
                                    slideOutVertically(
                                        targetOffsetY = { it },
                                        animationSpec = tween(1000)
                                    )
                            }
                        ) {
                            ContentGreen("This is Screen C")
                        }
                    },
                    transitionSpec = {
                        // Slide in from right when navigating forward
                        slideInHorizontally(initialOffsetX = { it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { -it })
                    },
                    popTransitionSpec = {
                        // Slide in from left when navigating back
                        slideInHorizontally(initialOffsetX = { -it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { it })
                    },
                    predictivePopTransitionSpec = {
                        // Slide in from left when navigating back
                        slideInHorizontally(initialOffsetX = { -it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { it })
                    },
                    modifier = Modifier.padding(paddingValues)
                )
            }
        }
    }
}

รูปที่ 1 แอปที่มีภาพเคลื่อนไหวที่กำหนดเอง