Menganimasikan tampilan teks karakter demi karakter

Anda dapat menganimasikan tampilan teks, karakter demi karakter, sehingga terlihat seperti efek pengetikan streaming, mirip dengan yang dihasilkan mesin tik.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Menganimasikan teks karakter demi karakter

Kode ini menganimasikan teks karakter demi karakter. Fungsi ini melacak indeks untuk mengontrol jumlah teks yang ditampilkan. Teks yang ditampilkan diperbarui secara dinamis untuk hanya menampilkan karakter hingga indeks saat ini. Terakhir, variabel menjalankan animasi saat berubah.

@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)

Poin-poin penting tentang kode

  • BreakIterator melakukan iterasi karakter dengan benar, terlepas dari cara penyimpanan karakter tersebut. Misalnya, emoji animasi terdiri dari beberapa karakter; BreakIterator memastikan bahwa emoji tersebut ditangani sebagai satu karakter, sehingga animasi tidak rusak.
  • LaunchedEffect memulai coroutine untuk menambahkan penundaan di antara karakter. Anda dapat mengganti blok kode dengan pemroses klik–atau peristiwa lainnya–untuk memicu animasi.
  • Composable Text dirender ulang setiap kali nilai substringText diperbarui.

Hasil

Gambar 1. Teks dan emoji dianimasikan karakter demi karakter.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Teks adalah bagian utama dari setiap UI. Cari tahu berbagai cara untuk menyajikan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Rangkaian video ini memperkenalkan berbagai Compose API, yang dengan cepat menunjukkan kepada Anda apa yang tersedia dan cara menggunakannya.

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.