I have a weird effect with `animateColor` involvin...
# compose
I have a weird effect with
involving alpha. It goes from
with a
spec. Instead of linear transition from one appearance to another, it goes first to less transparent
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)
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)
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)
Copy code
val ColorToVectorPremultiplied: TwoWayConverter<Color, AnimationVector4D> =
        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)
                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.
Note, that linear gradient works properly (on desktop), because it is implemented in the platform and likely does “right thing”
cc @Doris Liu