hi everyone, i creating a grid system like the image and want to make an animation by translating th...

# compose

[Markus Fung]

hi everyone, i creating a grid system like the image and want to make an animation by translating the red circle into specific circle cell in the grid.
im using animateDpAsState to make the animation and it works
however the offset seems a little bit off the place when going to the last circle cell. When i zooming in the preview, i saw these layout indicator line.

[Markus Fung]

and it has a little space between the second and third line ( as well as sixth and seventh )
is it the problem why my red circle is off the place ?

[Chris Sinco [G]]

Do you have a code snippet?

[Chris Sinco [G]]

On the preview grey lines, I think that might be a fault on our end for how we are drawing them when things overlap. Would be good to see a video also of where things look off

[Markus Fung]

im implementing it using 2 loops with column and row

[Markus Fung]

Column {
       Row {
            Rectangle()
       }
}

like this

[Markus Fung]

will it be the problem of dp ?

Box(modifier = Modifier
    .offset(x = offsetXState.value.dp, y = offsetYState.value.dp)
    .size(cellSize.dp)
    .aspectRatio(1f)
    .background(Color(0xFFf75f57))
)

[Markus Fung]

since im offseting that red circle with modifier offset

[Markus Fung]

and it is using dp

[Doris Liu]

It may be due to the rounding with Dp. Have you tried operating on pixel instead, with the

fun Modifier.offset(offset: Density.() -> IntOffset)

API instead? I'd recommend this API for animations since it avoids recomposition on every frame which is more efficient