คุณสามารถสร้างภาพเคลื่อนไหวให้ข้อความปรากฏขึ้นทีละตัวอักษรเพื่อให้ดู เหมือนเอฟเฟกต์การพิมพ์แบบสตรีม ซึ่งคล้ายกับที่เครื่องพิมพ์ดีดจะสร้างขึ้น
ความเข้ากันได้ของเวอร์ชัน
การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า minSDK ของโปรเจ็กต์เป็น API ระดับ 21 ขึ้นไป
การขึ้นต่อกัน
ทำให้ข้อความเคลื่อนไหวทีละอักขระ
โค้ดนี้จะทำให้ข้อความเคลื่อนไหวทีละอักขระ โดยจะติดตามดัชนีเพื่อควบคุม ปริมาณข้อความที่แสดง ข้อความที่แสดงจะอัปเดตแบบไดนามิกเพื่อแสดง เฉพาะอักขระจนถึงดัชนีปัจจุบัน สุดท้าย ตัวแปรจะเรียกใช้ ภาพเคลื่อนไหวเมื่อมีการเปลี่ยนแปลง
@Composable private fun AnimatedText() { val text = "This text animates as though it is being typed \uD83E\uDDDE\u200D♀\uFE0F \uD83D\uDD10 \uD83D\uDC69\u200D❤\uFE0F\u200D\uD83D\uDC68 \uD83D\uDC74\uD83C\uDFFD" // Use BreakIterator as it correctly iterates over characters regardless of how they are // stored, for example, some emojis are made up of multiple characters. // You don't want to break up an emoji as it animates, so using BreakIterator will ensure // this is correctly handled! val breakIterator = remember(text) { BreakIterator.getCharacterInstance() } // Define how many milliseconds between each character should pause for. This will create the // illusion of an animation, as we delay the job after each character is iterated on. val typingDelayInMs = 50L var substringText by remember { mutableStateOf("") } LaunchedEffect(text) { // Initial start delay of the typing animation delay(1000) breakIterator.text = StringCharacterIterator(text) var nextIndex = breakIterator.next() // Iterate over the string, by index boundary while (nextIndex != BreakIterator.DONE) { substringText = text.subSequence(0, nextIndex).toString() // Go to the next logical character boundary nextIndex = breakIterator.next() delay(typingDelayInMs) } } Text(substringText)
ประเด็นสำคัญเกี่ยวกับโค้ด
BreakIteratorจะวนซ้ำอักขระอย่างถูกต้องไม่ว่าจะจัดเก็บอักขระเหล่านั้นอย่างไร เช่น อีโมจิเคลื่อนไหวประกอบด้วยอักขระหลายตัวBreakIteratorช่วยให้มั่นใจได้ว่าระบบจะจัดการอีโมจิเหล่านั้นเป็นอักขระตัวเดียว เพื่อให้ภาพเคลื่อนไหวไม่หยุดชะงักLaunchedEffectเริ่มโครูทีนเพื่อหน่วงเวลาการแสดงผลระหว่างอักขระ คุณสามารถแทนที่บล็อกโค้ดด้วยเครื่องมือฟังการคลิก หรือเหตุการณ์อื่นๆ เพื่อทริกเกอร์ภาพเคลื่อนไหวTextที่ประกอบได้จะแสดงผลซ้ำทุกครั้งที่ค่า ของsubstringTextได้รับการอัปเดต
ผลลัพธ์
คอลเล็กชันที่มีคำแนะนำนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่คัดสรรมาแล้วซึ่งครอบคลุม เป้าหมายการพัฒนา Android ที่กว้างขึ้น
ข้อความที่แสดง