Merge pull request #346 from android/animate-char-by-char

Code snippet for Compose doc at https://developer.android.com/quick-g…

Author: thedmail

compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt

@@ -109,6 +109,9 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import com.example.compose.snippets.R
+import java.text.BreakIterator
+import java.text.StringCharacterIterator
+import kotlinx.coroutines.delay
 
 /*
 * Copyright 2023 The Android Open Source Project
@@ -820,3 +823,39 @@ private fun Expanded() {
 @Composable
 private fun ContentIcon() {
 }
+
+// [START android_compose_animations_char_by_char]
+@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)
+// [END android_compose_animations_char_by_char]
+}