テキストの外観を文字単位でアニメーション化する

テキストの表示を 1 文字ずつアニメーション化して、タイプライターで入力したようなストリーミング入力効果を演出できます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

テキストを 1 文字ずつアニメーション表示する

このコードは、テキストを 1 文字ずつアニメーション化します。テキストの表示量を制御するインデックスを追跡します。表示されるテキストは動的に更新され、現在のインデックスまでの文字のみが表示されます。最後に、変数は変更時にアニメーションを実行します。

@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 は、アニメーションが壊れないように、アニメーション絵文字が 1 つの文字として処理されるようにします。
  • LaunchedEffect は、文字間の遅延を導入するコルーチンを開始します。コードブロックを、クリック リスナー(またはその他のイベント)に置き換えて、アニメーションをトリガーできます。
  • substringText の値が更新されるたびに、Text コンポーザブルが再レンダリングされます。

結果

図 1. テキストと絵文字が 1 文字ずつアニメーション表示される。

このガイドを含むコレクション

このガイドは、Android 開発のより広範な目標を対象とした、厳選されたクイックガイド コレクションの一部です。

テキストは UI の主要な構成要素です。アプリでテキストを表示して優れたユーザー エクスペリエンスを実現するためのさまざまな方法について説明します。
この動画シリーズでは、さまざまな Compose API を紹介し、利用可能な API とその使用方法を簡単に説明します。

ご質問やフィードバックがある場合

よくある質問のページでクイック ガイドを確認するか、お問い合わせのうえご意見をお聞かせください。