BrushTransition and ColorTransition that starts with transparent colors doesn't look smooth

[Mochengvia]

<Style Selector="Button.s1">
    <Setter Property="Background"
            Value="Transparent"/>
    <Setter Property="Transitions">
        <Setter.Value>
            <Transitions>
                <BrushTransition Property="Background"
                                 Duration="0:0:0.3" />
            </Transitions>
        </Setter.Value>
    </Setter>
</Style>

<Style Selector="Button.s1:pointerover">
    <Setter Property="Background"
        Value="#0692F0"/>
</Style>

In WPF, it behaves as follows: In Avalonia, it transitions to grayish white first, then changes to blue.

Describe the solution you'd like

Is it possible to improve the display effects by optimizing the color transition algorithm or similar methods?

Describe alternatives you've considered

No response

Additional context

No response

[maxkatz6]

IIRC, that's because Transparent has a value of #00ffffff. I.e. a white color with 0 alpha channel. If you interpolate colors from #00ffffff to #0692F0, you will get exactly the same effect as in Avalonia.

If it was #00000000, you would get the opposite, but still wrong, effect.

I didn't check how WPF handles it, but I would assume they have a special handling for transparent colors.

As a workaround, you simply can pass a #000692F0 color to your default Background setter (same target color, but 0 alpha).

[timunie]

I remember I had a similar issue in WPF for a linear gradient brush from transparent to blue or whatever. Tbh, one may want exactly this whitish behavior and if we added some magic to avoided it there wouldn't be a way to do that.

Possible solution here is a Converter that takes any color and makes the Alpha channel 0.

[Mochengvia]

The color animation starting from '#000692F0' looks smooth now. UI developers might still prefer to use 'Transparent' rather than a transparent color, so I have to add a explanation in the develop docs :( . Hope avalonia will handle this, so I can remove the extra explanation.

[timunie]

from core team discussion:

Steve Monaco @stevemonaco

Maybe ColorTransition and BrushTransition can have a Strategy property. One strategy is where RGB color channels are set immediately and only the transparency channel transitions. There are a lot of options though, especially if color space gets involved. Color transition effects should really be done in HSV or HSL anyways and it's an area that CSS does quite well from what I've seen.

Maybe an alternative is FuncColorTransition or some way to generally create custom transitions with less boilerplate ceremony.

CSS Color Level 4 and 5 are impressive, especially in a browser context. Not just the animations, but color-mix() itself too.