ภาพเคลื่อนไหวใน Compose
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ดูวิธีทำให้ค่าสถานะเคลื่อนไหวโดยใช้ทรานซิชัน การแสดงผลภาพเคลื่อนไหวหรือการเปลี่ยนแปลงขนาด และการเปลี่ยนภาพโดยใช้ Compose animation API
ข้อมูลสำคัญ
animate*AsState
API มีประโยชน์ในการสร้างภาพเคลื่อนไหวของค่าเดี่ยวตามการเปลี่ยนแปลงสถานะ
- หากต้องการทำให้ค่าหลายค่าเคลื่อนไหวพร้อมกัน ให้สร้างทรานซิชันด้วยฟังก์ชัน
updateTransition
- คุณสามารถประกาศค่าภาพเคลื่อนไหวแต่ละค่าด้วยฟังก์ชันส่วนขยายบนออบเจ็กต์ทรานซิชัน
- หากต้องการปรับแต่งลักษณะการทํางานของภาพเคลื่อนไหว ให้ระบุพารามิเตอร์
transitionSpec
AnimatedVisibility
มีประโยชน์สำหรับการแสดงผลและซ่อนด้วยภาพเคลื่อนไหว
- ปรับแต่งลักษณะการทำงานของภาพเคลื่อนไหวโดยระบุพารามิเตอร์สำหรับการเข้าและออก
- หากต้องการทำให้องค์ประกอบมีการเปลี่ยนแปลงขนาดแบบเคลื่อนไหว ให้ใช้ตัวปรับ
animateContentSize
- หากต้องการแสดงภาพเคลื่อนไหวของการเปลี่ยนแปลงเมื่อคุณเปลี่ยนชิ้นส่วนของ UI ให้ใช้คอมโพสิเบิล
Crossfade
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
ข้อมูลเบื้องต้นเกี่ยวกับองค์ประกอบ
ชุดวิดีโอนี้จะแนะนำ Compose API ต่างๆ โดยแสดงสิ่งที่มีให้ใช้งานและวิธีใช้อย่างรวดเร็ว
แสดงรูปภาพ
ดูเทคนิคการใช้ภาพสดใสที่ดึงดูดความสนใจเพื่อให้แอป Android ของคุณมีรูปลักษณ์ที่สวยงาม
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-02-06 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-02-06 UTC"],[],[],null,["# Animation in Compose\n\n\u003cbr /\u003e\n\nSee how to animate state values, using transitions, animating visibility or size\nchanges and crossfades by using the Compose animation APIs. \n\nKey points\n----------\n\n- The [`animate*AsState`](/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)) API is useful for animating a single value based on a state change.\n- To animate multiple values at the same time, create a transition with the [`updateTransition`](/reference/kotlin/androidx/compose/animation/core/package-summary#updateTransition(kotlin.Any,kotlin.String)) function.\n - You can declare each animation value with an extension function on the transition object.\n- To customize the animation behavior, specify the `transitionSpec` parameter.\n- [`AnimatedVisibility`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)) is useful for animating appearance and disappearance.\n- Customize animation behavior by specifying parameters for enter and exit.\n- To animate size changes of elements, use the [`animateContentSize`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)) modifier.\n- To animate changes when you swap out portions of your UI, use the [`Crossfade`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).Crossfade(androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,kotlin.Function1)) composable.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Compose basics\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]