이 페이지는 Cloud Translation API를 통해 번역되었습니다.

텍스트 모양을 문자별로 애니메이션 처리

텍스트의 모양을 문자별로 애니메이션 처리하여 타자기에서 생성하는 것과 유사한 스트리밍 입력 효과를 줄 수 있습니다.

버전 호환성

이 구현을 사용하려면 프로젝트 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)AnimationSnippets.kt

코드 관련 핵심 사항

BreakIterator는 문자가 저장된 방식과 관계없이 문자를 올바르게 반복합니다. 예를 들어 애니메이션 이모티콘은 여러 문자로 구성됩니다. BreakIterator는 애니메이션이 중단되지 않도록 단일 문자로 처리되도록 합니다.
LaunchedEffect는 코루틴을 시작하여 문자 간에 지연을 적용합니다. 코드 블록을 클릭 리스너 또는 다른 이벤트로 대체하여 애니메이션을 트리거할 수 있습니다.
Text 컴포저블은 substringText 값이 업데이트될 때마다 다시 렌더링됩니다.