Możesz animować pojawianie się tekstu znak po znaku, aby wyglądał jak efekt pisania strumieniowego, podobnie jak w przypadku maszyny do pisania.
Zgodność wersji
Ta implementacja wymaga, aby minimalny pakiet SDK projektu był ustawiony na poziom API 21 lub wyższy.
Zależności
Animowanie tekstu znak po znaku
Ten kod animuje tekst znak po znaku. Śledzi indeks, aby kontrolować, ile tekstu jest widoczne. Wyświetlany tekst jest dynamicznie aktualizowany, aby pokazywać tylko znaki do bieżącego indeksu. Gdy zmienna się zmieni, uruchomi animację.
@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)
Najważniejsze informacje o kodzie
BreakIteratorprawidłowo iteruje po znakach niezależnie od sposobu ich przechowywania. Na przykład animowane emoji składają się z wielu znaków. AtrybutBreakIteratorzapewnia, że są one traktowane jako jeden znak, dzięki czemu animacja nie jest przerywana.LaunchedEffecturuchamia korutynę, aby wprowadzić opóźnienie między znakami. Blok kodu możesz zastąpić modułem nasłuchiwania kliknięć lub dowolnym innym zdarzeniem, aby aktywować animację.- Funkcja kompozycyjna
Textjest ponownie renderowana za każdym razem, gdy wartośćsubstringTextjest aktualizowana.
Wyniki
Kolekcje, które zawierają ten przewodnik
Ten przewodnik jest częścią wyselekcjonowanych kolekcji przewodników, które obejmują szersze cele związane z programowaniem na Androida:
Tekst wyświetlany