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
BreakIteratormengulangi karakter dengan benar, terlepas dari cara penyimpanannya. Misalnya, emoji animasi terdiri dari beberapa karakter;BreakIteratormemastikan bahwa emoji tersebut ditangani sebagai satu karakter, sehingga animasi tidak rusak.LaunchedEffectmemulai coroutine untuk menambahkan penundaan di antara karakter. Anda dapat mengganti blok kode dengan pendengar klik–atau peristiwa lainnya–untuk memicu animasi.- Composable
Textdirender ulang setiap kali nilaisubstringTextdiperbarui.
Hasil
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang mencakup tujuan pengembangan Android yang lebih luas:
Teks tampilan