ทำให้ลักษณะของข้อความเคลื่อนไหวทีละตัวอักษร

คุณสามารถสร้างภาพเคลื่อนไหวให้ข้อความปรากฏขึ้นทีละตัวอักษรเพื่อให้ดู เหมือนเอฟเฟกต์การพิมพ์แบบสตรีม ซึ่งคล้ายกับที่เครื่องพิมพ์ดีดจะสร้างขึ้น

ความเข้ากันได้ของเวอร์ชัน

การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า 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 ได้รับการอัปเดต

ผลลัพธ์

รูปที่ 1 ข้อความและอีโมจิเคลื่อนไหวทีละตัวอักษร

คอลเล็กชันที่มีคำแนะนำนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่คัดสรรมาแล้วซึ่งครอบคลุม เป้าหมายการพัฒนา Android ที่กว้างขึ้น

ข้อความเป็นองค์ประกอบหลักของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อมอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้
วิดีโอชุดนี้จะแนะนำ Compose API ต่างๆ และแสดงให้เห็นอย่างรวดเร็วว่ามีอะไรบ้างและวิธีใช้งาน

มีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคำแนะนำแบบรวดเร็ว หรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ