Android Academy · บทเรียน

AnimatedVisibility และการเปลี่ยนผ่าน

สร้างแอนิเมชันสำหรับการแสดงและซ่อนเนื้อหา

บทเรียน 3 จาก 413 ขั้นตอน

AnimatedVisibility และการเปลี่ยนผ่าน เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทำแอนิเมชันให้การปรากฏ

การแสดงและซ่อนเนื้อหาแบบฉับพลันทำให้รู้สึกสะดุด AnimatedVisibility ของ Compose จะทำแอนิเมชันให้คอมโพสซิเบิลขณะเข้าสู่และออกจากเค้าโครง

ครอบเนื้อหาของคุณด้วย API นี้ แล้วควบคุมการมองเห็นด้วยค่าบูลีน เมื่อค่าบูลีนเปลี่ยน Compose จะเล่นแอนิเมชันขาเข้าหรือขาออกแทนการแสดงหรือซ่อนทันที

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

การเปลี่ยนสถานะขาเข้าและขาออก

คุณสามารถเลือกได้อย่างละเอียดว่าเนื้อหาจะเข้ามาและออกไปอย่างไรด้วยพารามิเตอร์ enter และ exit ส่วนประกอบที่ใช้บ่อย ได้แก่ fadeIn/fadeOut, slideIn/slideOut และ expandVertically/shrinkVertically

รวมหลายรายการให้ทำงานพร้อมกันได้ด้วยตัวดำเนินการ +

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

ปรับแต่งข้อกำหนดการเปลี่ยนสถานะ

การเปลี่ยนสถานะขาเข้าและขาออกแต่ละแบบรองรับ animationSpec คุณจึงควบคุมระยะเวลาและเส้นโค้งการเร่งได้เช่นเดียวกับ animate*AsState

ในตัวอย่างนี้ เนื้อหาจะค่อย ๆ ปรากฏในเวลา 300 มิลลิวินาที และหายไปเร็วกว่าในเวลา 150 มิลลิวินาที ซึ่งเป็นรูปแบบที่ใช้กันทั่วไปและทำให้การปิดดูฉับไว

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

ขยายและย่อ

สำหรับส่วนที่แสดงเนื้อหาเพิ่มเติม expandVertically และ shrinkVertically จะทำแอนิเมชันให้ความสูง ทำให้เนื้อหาโดยรอบถูกดันออกไปอย่างราบรื่น

เหมาะอย่างยิ่งสำหรับแผงที่ยุบหรือขยายได้ รายการคำถามที่พบบ่อย หรือส่วน "แสดงเพิ่มเติม"

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: สถานะเดียว หลายค่า

เมื่อคุณสมบัติหลายรายการควรเปลี่ยนไปพร้อมกันตามสถานะเดียว updateTransition จะทำหน้าที่ประสานการเปลี่ยนแปลง โดยสร้างออบเจ็กต์ Transition ที่องค์ประกอบย่อยทั้งหมดทำแอนิเมชันไปพร้อมกัน

กำหนดสถานะ แล้วใช้ animateColor, animateDp และอื่น ๆ กับแต่ละคุณสมบัติตามสถานะนั้น

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

การกำหนดเวลารายคุณสมบัติในการเปลี่ยนสถานะ

ข้อดีสำคัญของ updateTransition คือการกำหนดเวลารายคุณสมบัติ องค์ประกอบย่อย animate* แต่ละรายการสามารถระบุ transitionSpec ของตนเองได้ ดังนั้นสีและขนาดจึงเคลื่อนไหวด้วยความเร็วต่างกันได้ ขณะยังประสานกันด้วยสถานะเดียวกัน

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: สลับเนื้อหา

เมื่อเนื้อหาเปลี่ยน ไม่ใช่เพียงการมองเห็นที่เปลี่ยน ให้ใช้ AnimatedContent API นี้ทำแอนิเมชันระหว่างเนื้อหาเก่ากับใหม่ โดยค่าเริ่มต้นจะค่อย ๆ จางเปลี่ยนจากเนื้อหาหนึ่งไปอีกเนื้อหาหนึ่ง

เหมาะสำหรับสิ่งต่าง ๆ เช่น ตัวนับ ตัวบอกขั้นตอน หรือการสลับระหว่างสถานะกำลังโหลดกับโหลดเสร็จแล้ว

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

ปรับแต่งการเปลี่ยนสถานะของ AnimatedContent

ปรับแต่งวิธีที่ AnimatedContent สลับเนื้อหาด้วย transitionSpec รูปแบบคลาสสิกสำหรับตัวนับคือเลื่อนค่าใหม่ขึ้น ขณะที่ค่าเก่าเลื่อนออกไป พร้อมกับการค่อย ๆ จาง

คีย์เวิร์ด using จะเชื่อม SizeTransform เพื่อให้คอนเทนเนอร์ปรับขนาดอย่างราบรื่นไปด้วย

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

ทำแอนิเมชันให้รายการในรายการเลื่อน

ภายใน LazyColumn รายการที่เพิ่ม ลบ หรือย้ายสามารถทำแอนิเมชันเข้าสู่ตำแหน่งได้ด้วย Modifier.animateItem() บนเนื้อหาของแต่ละรายการ

วิธีนี้ช่วยให้การจัดเรียงใหม่และการแทรกรายการราบรื่น โดยไม่ต้องจัดการข้อมูลประกอบด้วยตนเอง

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

ค่อย ๆ จางสำหรับทั้งหน้าจอ

Crossfade เป็นตัวช่วยที่เรียบง่ายและมุ่งเน้นงานเดียว สำหรับค่อย ๆ จางเปลี่ยนระหว่างสองสถานะ เหมาะสำหรับการสลับทั้งหน้าจอหรือสถานะหลักของส่วนติดต่อผู้ใช้

ส่งสถานะปัจจุบันและแลมบ์ดาเนื้อหาให้ API นี้ เมื่อสถานะเปลี่ยน Crossfade จะทำให้เนื้อหาเก่าค่อย ๆ หายไปและเนื้อหาใหม่ค่อย ๆ ปรากฏ

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

ประสานองค์ประกอบย่อยขาเข้า

ภายในบล็อก AnimatedVisibility คุณจะได้รับ AnimatedVisibilityScope ซึ่งเปิดใช้ Modifier.animateEnterExit() ทำให้องค์ประกอบย่อยแต่ละรายการทำแอนิเมชันขาเข้าและขาออกของตนเองเพิ่มเติมจากการเปลี่ยนสถานะขององค์ประกอบหลักได้

ตัวอย่างเช่น แผงอาจเลื่อนเข้ามา ขณะที่ชื่อเรื่องค่อย ๆ ปรากฏช้ากว่าเล็กน้อยเพื่อสร้างเอฟเฟกต์เป็นชั้น

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

ตรวจสอบความเข้าใจ

คุณต้องการทำแอนิเมชันตอนสลับจากเลข 3 เป็นเลข 4 โดยให้ค่าใหม่ค่อย ๆ ปรากฏและเลื่อนเข้ามา ควรใช้ API ใด

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: การมองเห็นและการเปลี่ยนสถานะ

ตอนนี้คุณสามารถทำแอนิเมชันให้เนื้อหาปรากฏ หายไป และเปลี่ยนแปลงได้แล้ว:

AnimatedVisibility ทำแอนิเมชันขาเข้าและขาออกด้วย fadeIn/Out, slideIn/Out, expand/shrink ซึ่งรวมกันได้ด้วย +
updateTransition ประสานค่าหลายค่าจากสถานะเดียว โดยแต่ละค่ามีข้อกำหนดของตนเอง
AnimatedContent ทำแอนิเมชันเมื่อสลับระหว่างเนื้อหาต่างกัน ส่วน Crossfade เป็นรูปแบบการค่อย ๆ จางที่เรียบง่าย
Modifier.animateItem() ทำแอนิเมชันให้การแทรกรายการและการจัดเรียงรายการใหม่

ถัดไป: ท่าทางและแอนิเมชันสปริงที่อิงหลักฟิสิกส์ เพื่อการเคลื่อนไหวที่เป็นธรรมชาติและโต้ตอบได้

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 36
บทเรียน: 152

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “AnimatedVisibility และการเปลี่ยนผ่าน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “AnimatedVisibility และการเปลี่ยนผ่าน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “AnimatedVisibility และการเปลี่ยนผ่าน”

สร้างแอนิเมชันสำหรับการแสดงและซ่อนเนื้อหา คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “AnimatedVisibility และการเปลี่ยนผ่าน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Android Academy