Sie können das Erscheinen von Textzeichen für Zeichen animieren, sodass es wie ein Streaming-Effekt aussieht, ähnlich wie bei einer Schreibmaschine.
Versionskompatibilität
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Textzeichen für Zeichen animieren
Mit diesem Code wird der Text nach und nach animiert. Dabei wird ein Index verwendet, um zu steuern, wie viel Text angezeigt wird. Der angezeigte Text wird dynamisch aktualisiert, sodass nur die Zeichen bis zum aktuellen Index zu sehen sind. Schließlich wird die Animation durch die Variable ausgeführt, wenn sie sich ändert.
@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)
Wichtige Punkte zum Code
BreakIterator
iteriert unabhängig davon, wie die Zeichen gespeichert sind, korrekt über die Zeichen. Animierte Emojis bestehen beispielsweise aus mehreren Zeichen. MitBreakIterator
werden sie als einzelnes Zeichen behandelt, damit die Animation nicht unterbrochen wird.LaunchedEffect
startet eine Coroutine, um die Verzögerung zwischen den Zeichen einzuführen. Sie können den Codeblock durch einen Klick-Listener oder ein anderes Ereignis ersetzen, um die Animation auszulösen.- Das
Text
-Element wird jedes Mal neu gerendert, wenn der Wert vonsubstringText
aktualisiert wird.
Ergebnisse
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=de)
Anzeigetext
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=de)