Metnin görünümünü karakter karakter animasyonlandırarak daktilo yazısı efektine benzer bir efekt oluşturabilirsiniz.
Sürüm uyumluluğu
Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya üstüne ayarlanmasını gerektirir.
Bağımlılıklar
Metni karakter karakter canlandırma
Bu kod, metne karakter karakter animasyon uygular. Metnin ne kadarının gösterileceğini kontrol etmek için bir dizin izler. Görüntülenen metin, yalnızca geçerli dizine kadar olan karakterleri gösterecek şekilde dinamik olarak güncellenir. Son olarak, değişken değiştiğinde animasyon çalıştırılır.
@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)
Kodla ilgili önemli noktalar
BreakIterator, karakterler nasıl depolanırsa depolansın doğru şekilde yinelenir. Örneğin, animasyonlu emojiler birden fazla karakterden oluşur.BreakIterator, animasyonun bozulmaması için bu emojilerin tek bir karakter olarak işlenmesini sağlar.LaunchedEffect, karakterler arasında gecikme oluşturmak için bir eş yordam başlatır. Animasyonu tetiklemek için kod bloğunu bir tıklama dinleyicisiyle veya başka bir etkinlikle değiştirebilirsiniz.substringTextdeğerinin her güncellenmesindeTextcomposable'ı yeniden oluşturulur.
Sonuçlar
Bu kılavuzu içeren koleksiyonlar
Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan şu seçilmiş Hızlı Kılavuz koleksiyonlarının bir parçasıdır:
Görünen metin