https://kotlinlang.org logo
Title
j

Jast Lai

11/24/2021, 8:47 AM
Hi, I have a little experiment. And I have some question.
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Text")
        }
        lifecycleScope.launch {
            delay(1000)
            repeat(100) {
                delay(10)
                animationPoint.value = animationPoint.value + 1
            }
        }
    }
}

var animationPoint = mutableStateOf(0)

@Composable
fun Greeting(aText: String) {
    Surface(
        modifier = Modifier.offset(
            x = animationPoint.value.dp
        )
    ) {
        Column {
            repeat(40) {
                Text("Text")
            }

        }
    }
}
this will make those Texts from left to right. It seem smooth and without any question. But if I change like this Text content to parameter.
@Composable
fun Greeting(aText: String) {
    Surface(
        modifier = Modifier.offset(
            x = animationPoint.value.dp
        )
    ) {
        Column {
            repeat(40) {
                Text(aText)
            }

        }
    }
}
It will feel lag and obviously has drop some frame. I wonder what difference between those two method ? And If I don't wanna drop frame, How should I do ?
🧵 3
t

Tolriq

11/24/2021, 9:01 AM
This is due to recomposition, docs does not emphase enough that you should most of the time never use offset(x,y) for animations but offset(offset: Density.() -> IntOffset) as the primer does trigger recomposition and not the second one.
j

Jast Lai

11/24/2021, 9:20 AM
But why dose second one not trigger recomposition?It show no difference with first one for only using parameter.
t

Tolriq

11/24/2021, 9:25 AM
Read their respective description 😉
This modifier is designed to be used for offsets that change, possibly due to user interactions. It avoids recomposition when the offset is changing, and also adds a graphics layer that prevents unnecessary redrawing of the context when the offset is changing.
As I said it's not visible enough in docs and hard to troubleshoot, but use the second version and you'll see the difference 🙂
j

Jast Lai

11/24/2021, 9:29 AM
Ok . I would try to find clue in description . I just can't get why value and parameter difference can effect modifier's behavior.
t

Tolriq

11/24/2021, 9:31 AM
It does not affect the modifier behavior, it affects the recomposition. In one case the content is static compose is smart enough to not recompose, in the second case the value is a parameter it does recompose. But the fact that recomposition is skipped with fixed text is side effect it's not what happens in normal case.
j

Jast Lai

11/24/2021, 9:33 AM
Oh.... I got it . Thank you. Happy with your answer. I should put the attention on animation without using offset. 😄
t

Tolriq

11/24/2021, 9:38 AM
use offset but the right one. It works nicely with the offset { } version.
Check https://www.jetpackcompose.app/articles/donut-hole-skipping-in-jetpack-compose and LogCompositions it helps understanding things sometimes.
j

Jast Lai

11/24/2021, 9:40 AM
I would check it, Thank you kindly.