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 level API 21 atau yang lebih tinggi.

Dependensi

Menganimasikan teks karakter demi karakter

Kode ini menganimasi teks karakter demi karakter. Objek ini melacak indeks untuk mengontrol seberapa banyak teks yang ditampilkan. Teks yang ditampilkan diperbarui secara dinamis untuk menampilkan hanya 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 penting tentang kode

  • BreakIterator mengulangi karakter dengan benar, terlepas dari cara penyimpanannya. 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 pendengar klik–atau peristiwa lainnya–untuk memicu animasi.
  • Composable Text dirender ulang setiap kali nilai substringText diperbarui.

Hasil

Gambar 1. Teks dan emoji yang dianimasikan karakter demi karakter.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang mencakup tujuan pengembangan Android yang lebih luas:

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

Ada pertanyaan atau masukan?

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