I have a weird effect with `animateColor` involvin...

# compose

[orangy]

I have a weird effect with animateColor involving alpha. It goes from Color.White to Color.Blue.copy(0.1f) with a tween() spec. Instead of linear transition from one appearance to another, it goes first to less transparent Color.Blue pretty fast and then alpha catches up, resulting in the unexpected effect of a “hump” transition. Any ideas how to fix it? E.g. in browser similar transition effect between same colors works as expected. (Compose for Desktop, if it is important)

[orangy]

I’ve visualised how the transition goes. I’ve snapshotted all colors during transition and build a row of boxes with these colors. It’s not linear gradient (see below)

[orangy]

Well, I figured it, and it seems another request to Compose is pending 🙂

The cause is that ColorToVector converter doesn’t use “premultiplied alpha” (googling “interpolating colors with alpha premultiplied” reveals quite a bit of resources, including bugs in browsers and such).

Basically, converter should look like this instead (simplified without colorspaces for Slack)

val ColorToVectorPremultiplied: TwoWayConverter<Color, AnimationVector4D> =
    TwoWayConverter(
        convertToVector = { color -> AnimationVector4D(color.alpha, color.red * color.alpha, color.green * color.alpha, color.blue * color.alpha) },
        convertFromVector = {
            val alpha = it.v1.coerceIn(0f, 1f)
            Color(
                alpha = alpha,
                red = it.v2.coerceIn(0f, 1f) / alpha,
                green = it.v3.coerceIn(0f, 1f) / alpha,
                blue = it.v4.coerceIn(0f, 1f) / alpha,
            )
        }
    )

With converter like this it works as expected.

[orangy]

Note, that linear gradient works properly (on desktop), because it is implemented in the platform and likely does “right thing”

[orangy]

https://issuetracker.google.com/issues/235616607

[Chris Sinco [G]]

cc @Doris Liu