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 nilaisubstringText
diperbarui.
Hasil
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=id)
Teks tampilan
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=id)