How can I translate a composable's visible positio...

# compose

[rob42]

How can I translate a composable's visible position without snapping to whole pixels -- i.e. fractional offsets.
The pixel snapping causes animation settling to be jittery.

Here's an example - you can see that the red box does not move smoothly:

val offsetY by rememberInfiniteTransition().animateFloat(
    initialValue = -3f,
    targetValue = 3f,
    animationSpec = infiniteRepeatable(
        animation = tween(easing = EaseInOutCubic, durationMillis = 2500),
        repeatMode = RepeatMode.Reverse))

Box(modifier = Modifier.size(128.dp).padding(32.dp)) {
    Box(modifier = Modifier.size(64.dp).offset(y = offsetY.dp).background(Color.Red))
}

[Sergey Y.]

Use Modifier.graphicsLayer {
translationX = ...
translationY = ..
}
instead of Modifier.offset()

[Sergey Y.]

FYI: https://developer.android.com/develop/ui/compose/animation/quick-guide#optimize-performance

[Sergey Y.]

To ensure your app does as little as possible while animating, choose the lambda version of a Modifier where possible. This skips recomposition and performs the animation outside of the composition phase, otherwise use Modifier.graphicsLayer{ }, as this modifier always runs in the draw phase. For more information on this, see the deferring reads section in the performance documentation.

[romainguy]

More importantly remember that layout is done in integer pixels, but drawing can be done fractionally. Hence the suggested use of graphicsLayer here.

[rob42]

Thanks for the advice re: graphicsLayer + translation.

I'm finding the same behaviour there -- even if I specify a fractional translation, it gets drawn at an integer offset

[rob42]

Errr, yet somehow when I just re-attempted this, it is drawn fractionally. Oops, guess I screwed something up earlier.

Thank you 🙂