https://kotlinlang.org logo
#compose
Title
# compose
c

Ch8n

03/04/2021, 6:23 AM
Hi guys can you guide me on how can I achieve this behavior? the purple color moves down and it does the color of the text changes from white to purple?
j

joakim

03/04/2021, 6:32 AM
Overlay two texts, animate a clip on the top one? I'm just making assumptions here but that's what I would try first
🧠 2
👍 9
n

Nader Jawad

03/04/2021, 8:40 PM
You can try something like the following. Effectively we are drawing the text into an offscreen buffer and using BlendMode.Xor to determine the appropriate pixel color. There is another thread from @Albert Chang that asks a similar question:
Copy code
// Configure alpha to almost 1 but not quite 1 to force graphics layer into
    // offscreen composition to ensure XOR blends against transparent pixels
    // otherwise the contents are drawn directly.
    val textColor = Color.Blue
    Box(Modifier.fillMaxWidth().wrapContentHeight().graphicsLayer(alpha = 0.99f).drawWithContent {
        drawContent()
        drawRect(
            textColor,
            topLeft = Offset(0f, size.height / 2),
            size = Size(size.width, size.height / 2),
            blendMode = BlendMode.Xor
        )
    }) {
        Text(
            "Hello World",
            textAlign = TextAlign.Center,
            fontSize = 50.sp,
            color = textColor
        )
    }
💯 2
This sample code generates the following output
c

Colton Idle

03/04/2021, 10:10 PM
Funny how the letters line up perfectly but it gives you that looking at something in a glass cup of water look.
n

Nader Jawad

03/07/2021, 7:51 PM
@Can, this thread seems to ask a similar question to the one you had posed in the other thread. Can you try this sample source?
c

Can

03/07/2021, 7:52 PM
Will do, thank you
btw @Nader Jawad here you use the same trick i used ("graphicsLayer(alpha = 0.99f)")
whereas @romainguy meant this shouldnt be needed
of course you are more explicit by creating a layer with the alpha
n

Nader Jawad

03/07/2021, 7:55 PM
Right now we don't expose a direct way to force layer rasterization so we use the alpha trick to do so as a side effect
In the future there will be a flag similar to
useCompostingLayer
that can be configured on the graphics layer to do this without having to manipulate alpha to do so
c

Can

03/07/2021, 7:59 PM
Oh, okay - thanks a bunch
👍 1
n

Nader Jawad

03/25/2021, 6:18 PM
@Shalaga44 this looks like a similar effect to what you are trying to achieve.