In a streaming music player, I am currently developing, I want to scroll title labels that are too long for the displays width. This is commonly known as a marquee effect and I achieve that one on .NET MAUI by automating the TranslationX property which works really great.
Now I would like to fade in and fade out the label when it's entering the display and leaving it.
I found a way that works but still feels like a hack: I simply created two rectangular images. One starting black on the left and fading to full alpha value to the right and another one that's basically mirrored. I then render these images on the left and on the right side of the display and make use of the zIndex property to make sure that the label is rendered behind these masking layers.
The result looks like this (fading in):
(fading out):
Obviously, I had to provide two versions of these masking images: One that fades from alpha to white and one that fades to black. And well... as you can image, this works really great when your background is white or black. Of course that would work with any other plain color as well.
Now here is the problem: My background is not supposed to be filled with a single color. Actually, I scale and blur the cover images of the titles that are currently being played. That looks awesome... but now my hack from above does not work anymore.
So I am left with a simple marquee label that scrolls in and out with no fading at all:
If I had a rectangular copy of the regions of the background image and would be able to apply a linear fade to alpha at runtime, I guess, my original hack would still work. But I cannot thing of any way of how to achieve this.
Do you guys have an idea?