How can I create a typing animation without compose state(draw state) in jetpack compose?

Question

At the moment, this recomposes whenever the caretIndex changes. But, I found out this can lead UI freezing.

    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(color = color)) {
                append(text.substring(0, caretIndex))
            }
            withStyle(style = SpanStyle(color = Color.Transparent)) {
                append(text.substring(caretIndex, text.length))
            }
        },
        style = style,
        modifier = modifier
    )

And I found out there are three steps, compose-layout-drawing from this video and this best practice video

So, I am trying to fix this within draw state. But, drawBehind seems like it only draws behind the actual UI. And, I found graphicsLayer and I think it works in draw state. But this doesn't give any feature that I can show the text one by one.

How can I achieve this?

score 1 · Answer 1 · answered Mar 15 '23 at 14:31

Modifier.drawWithContent{} with drawContent() draws your content. Depending on order of drawContent() you can draw behind or in front of actual content. You can refer this answer for sample usage. I draw a rectangle with blend mode above actual heart or clock drawable in that answer.

How can I create a typing animation without compose state(draw state) in jetpack compose?

1 Answers1