How to create AGSL shader based animation effects with Jetpack Compose?

75 Views Asked by At

I'm working on a Jetpack Compose shader effect based on this sample code. I am applying the effect to my whole surface, like this:

    setContent {
        MathtestTheme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize()
                    .graphicsLayer {
                        clip = true
                        
                        renderEffect =
                            RenderEffect
                                .createRuntimeShaderEffect(shader, "composable")
                                .asComposeRenderEffect()

                    },
                color = MaterialTheme.colorScheme.background
            ) {
                Greeting("Android")
              }

In the Google Documentation, I found code how to provide a uniform animated by ValueAnimator. My shader effect is taking this as an input. However, my screen isn't animated.

I'm new in the domain of Android UI, so there's a lot of guessing involved here.. I assume, my effect is just not animated because the UI is not redrawn. Animation sample code that I can find is using compose animations, where compose elements itself are animated already.

Is it possible to have shader-based renderEffect which is continuously animated, applied on an otherwise static compose Surface?

I'm aware that I am lacking a deeper understanding and terminology here. Please comment opinions how to improve.

0

There are 0 best solutions below