Textzeichen für Zeichen animieren

Sie können das Einblenden von Text zeichenweise animieren, sodass es wie ein Schreibmaschineneffekt aussieht.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Text zeichenweise animieren

Mit diesem Code wird Text zeichenweise animiert. Es wird ein Index verfolgt, um zu steuern, wie viel vom Text angezeigt wird. Der angezeigte Text wird dynamisch aktualisiert, sodass nur die Zeichen bis zum aktuellen Index angezeigt werden. 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 durchläuft Zeichen unabhängig davon, wie sie gespeichert werden, korrekt. Animierte Emojis bestehen beispielsweise aus mehreren Zeichen. Mit BreakIterator wird dafür gesorgt, dass sie als einzelnes Zeichen behandelt werden, 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 Click-Listener oder ein anderes Ereignis ersetzen, um die Animation auszulösen.
  • Die zusammensetzbare Funktion Text wird jedes Mal neu gerendert, wenn der Wert von substringText aktualisiert wird.

Ergebnisse

Abbildung 1. Text und Emojis werden zeichenweise animiert.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden Kurzanleitungen, die umfassendere Ziele der Android-Entwicklung abdecken:

Text ist ein zentraler Bestandteil jeder Benutzeroberfläche. Hier finden Sie verschiedene Möglichkeiten, Text in Ihrer App zu präsentieren, um eine ansprechende Nutzererfahrung zu bieten.
In dieser Videoreihe werden verschiedene Compose-APIs vorgestellt. Sie erfahren, was verfügbar ist und wie Sie die APIs verwenden.

Fragen oder Feedback

Auf der Seite mit den häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können uns aber auch gern kontaktieren und uns Ihre Meinung mitteilen.