updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน
ทำให้หลายค่าเคลื่อนไหวจากสถานะเดียว
updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำให้หลายค่าเคลื่อนไหวพร้อมกัน
เมื่อคุณสมบัติหลายอย่างควรเปลี่ยนไปพร้อมกับการเปลี่ยนสถานะ คุณย่อมต้องการให้ทั้งหมดสอดคล้องกัน updateTransition จะประสานภาพเคลื่อนไหวหลายรายการจากสถานะเดียว ✨
เริ่มจากสถานะ
สร้างการเปลี่ยนผ่านโดยส่งสถานะปัจจุบันให้ updateTransition Compose จะเฝ้าดูสถานะนั้นและขับเคลื่อนภาพเคลื่อนไหวลูกทั้งหมดเมื่อสถานะเปลี่ยน
val transition = updateTransition(targetState = expanded)สร้างค่าที่เคลื่อนไหว
ขอค่าต่าง ๆ จากการเปลี่ยนผ่านด้วย animateDp, animateColor และตัวช่วยอื่น ๆ โดยส่งแลมบ์ดาที่จับคู่แต่ละสถานะกับค่าเป้าหมาย
val size by transition.animateDp { if (it) 200.dp else 80.dp }หลายค่า แหล่งเดียว
เพิ่ม ภาพเคลื่อนไหวลูก ได้มากเท่าที่ต้องการจากการเปลี่ยนผ่านเดียวกัน ขนาด สี และรัศมีมุมจะเปลี่ยนไปพร้อมกันจากบูลีนเพียงค่าเดียว
val corner by transition.animateDp { if (it) 0.dp else 24.dp }ประสานกันอย่างสมบูรณ์
เนื่องจากใช้การเปลี่ยนผ่านเดียวกัน ค่าต่าง ๆ จึงยังคง สอดคล้องกันทุกจังหวะ ไม่มีความเสี่ยงที่ขนาดจะเสร็จก่อนสี ซึ่งอาจเกิดขึ้นเมื่อใช้การเรียก animateAsState แยกกัน
ใช้ค่าในตัวปรับแต่ง
อ่านค่าแต่ละค่าที่เคลื่อนไหวเหมือนสถานะทั่วไป แล้วนำไปใช้ องค์ประกอบทั้งหมดจะค่อย ๆ เปลี่ยนรูปอย่างนุ่มนวลขณะที่การเปลี่ยนผ่านทำงานในทุกเฟรม
Box(Modifier.size(size).clip(RoundedCornerShape(corner)))เวลาแยกตามค่า
ลูกแต่ละรายการสามารถมี transitionSpec ของตัวเองได้ ทำให้สีเปลี่ยนทันทีอย่างรวดเร็ว ขณะที่ขนาดค่อย ๆ เปลี่ยนช้าลง โดยทั้งหมดก็ยังถูกกระตุ้นจากการเปลี่ยนสถานะเดียวกัน
transition.animateDp(transitionSpec = { tween(600) }) { ... }มากกว่าสองสถานะ
สถานะของคุณอาจเป็น enum ก็ได้ ไม่จำเป็นต้องเป็นเพียงค่าบูลีนเท่านั้น โดยจับคู่แต่ละกรณีกับเป้าหมาย แล้วการเปลี่ยนสถานะจะทำแอนิเมชันระหว่างกรณีเหล่านั้น
enum class BoxState { Collapsed, Half, Expanded }ตรวจสอบสถานะปัจจุบันและเป้าหมาย
การเปลี่ยนสถานะจะแสดงค่า currentState และสถานะเป้าหมาย คุณจึงตรวจสอบได้ว่าการเคลื่อนไหวยังดำเนินอยู่หรือหยุดลงที่เป้าหมายแล้ว
ควรเลือกใช้เมื่อใด
เลือกใช้ updateTransition เมื่อเหตุการณ์หนึ่งควบคุมการเปลี่ยนแปลงหลายอย่างที่ประสานกัน เช่น การขยายการ์ดพร้อมกับเปลี่ยนสีและระดับความสูงไปพร้อมกัน 🎬
เบากว่าการเรียกหลายครั้ง
การรวมแอนิเมชันไว้ภายใต้ transition เดียวเป็นระเบียบและทำความเข้าใจได้ง่ายกว่าการจัดการค่าจาก animate*AsState ที่เป็นอิสระต่อกันหลายค่า
ตรวจสอบความเข้าใจ
ประโยชน์หลักของ updateTransition เมื่อเทียบกับการเรียก animate*AsState แยกกันคืออะไร
ทบทวน: หนึ่งสถานะ หลายการเคลื่อนไหว
คุณได้เรียนรู้ updateTransition ซึ่งใช้สร้างค่าที่มีแอนิเมชันหลายค่าจากสถานะเดียว ทำให้ค่าทั้งหมดเคลื่อนไหวสอดคล้องกันอย่างสมบูรณ์ โดยแต่ละค่ามีจังหวะเวลาของตัวเอง 🎉
เรียนรู้ Kotlin ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน”
ทำให้หลายค่าเคลื่อนไหวจากสถานะเดียว คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- animate*AsState สำหรับการเปลี่ยนค่าอย่างง่าย
- AnimatedVisibility และ Crossfade
- updateTransition สำหรับการเคลื่อนไหวที่ประสานกัน
- แอนิเมชันที่ขับเคลื่อนด้วยท่าทาง