Посимвольная анимация внешнего вида текста

Вы можете анимировать посимвольно внешний вид текста, чтобы он выглядел как потоковое печатание, похожее на то, что производит пишущая машинка.

Совместимость версий

Для этой реализации требуется, чтобы minSDK вашего проекта был установлен на уровень API 21 или выше.

Зависимости

Анимировать текст посимвольно

Этот код анимирует текст посимвольно. Он отслеживает индекс, чтобы контролировать, насколько полно текст отображается. Отображаемый текст динамически обновляется, отображая только символы до текущего индекса. Кроме того, анимация запускается при изменении переменной.

@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)

Ключевые моменты кода

  • BreakIterator корректно перебирает символы независимо от способа их хранения. Например, анимированные эмодзи состоят из нескольких символов; BreakIterator гарантирует, что они обрабатываются как один символ, не нарушая анимацию.
  • LaunchedEffect запускает сопрограмму для создания задержки между символами. Вы можете заменить блок кода прослушивателем щелчков или любым другим событием для запуска анимации.
  • Составной Text перерисовывается каждый раз при обновлении значения substringText .

Результаты

Рисунок 1. Текст и эмодзи, анимированные посимвольно.

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции кратких руководств, охватывающих более широкие цели разработки Android:

Текст — центральный элемент любого пользовательского интерфейса. Узнайте, как можно представить текст в приложении, чтобы обеспечить пользователю приятный опыт взаимодействия.
В этой серии видеороликов представлены различные API Compose, которые наглядно демонстрируют доступные возможности и способы их использования.

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и ознакомьтесь с краткими руководствами или свяжитесь с нами и поделитесь своими мыслями.