hey i m looking for help regarding custom animations using C

Question

hey i m looking for help regarding custom animations using Compose

zhuinden · Answer

I m trying to animate like this ``` modifier then when stateChange direction StateChange FORWARD gt Modifier graphicsLayer translationX = fullWidth + 1 fullWidth animationProgress StateChange BACKWARD gt Modifier graphicsLayer translationX = 1 fullWidth + fullWidth animationProgress else REPLACE gt Modifier graphicsLayer alpha = 0 + animationProgress ``` and it s based on this code ``` var isAnimating by remember mutableStateOf true true renders previous initially for fullWidth val scope = rememberCoroutineScope val lerping = Animatable 0 0f Float VectorConverter 1 0f DO NOT REMEMBER var animationProgress by remember mutableStateOf 0 0f var fullWidth by remember mutableStateOf 0 var fullHeight by remember mutableStateOf 0 val measurePolicy = MeasurePolicy measurables constraints gt val placeables = measurables fastMap it measure constraints val maxWidth = placeables fastMaxBy it width width 0 val maxHeight = placeables fastMaxBy it height height 0 if fullWidth == 0 fullWidth = maxWidth if fullHeight == 0 fullHeight = maxHeight layout maxWidth maxHeight placeables fastForEach placeable gt placeable place 0 0 Layout content = if fullWidth gt 0 amp amp fullHeight gt 0 key topNewKey topNewKey RenderComposable modifier measurePolicy = measurePolicy modifier = when isAnimating gt modifier else gt animationConfiguration customComposableTransitions newComposableTransition animateNewComposable modifier stateChange fullWidth fullHeight animationProgress Layout content = if isAnimating key topPreviousKey topPreviousKey RenderComposable modifier measurePolicy = measurePolicy modifier = when isAnimating gt modifier else gt animationConfiguration customComposableTransitions previousComposableTransition animatePreviousComposable modifier stateChange fullWidth fullHeight animationProgress DisposableEffect key1 = completionCallback effect = scope launch isAnimating = true animationProgress = 0 0f lerping animateTo 1 0f animationConfiguration animationSpec animationProgress = this value isAnimating = false completionCallback stateChangeComplete onDispose do nothing ``` but for whatever reason it causes the composable being animated in to flicker in before it actually is rendered elsewhere by the graphicsLayer what am I missing thinking face

zhuinden · Answer

alternately people tend to say that animation in Compose is trivial and i m not seeing it so hopefully i m actually missing something joy

zhuinden · Answer

code <https github com Zhuinden simple stack compose integration blob 8540b5a61ab44d15d676dcc35069d994264150e0 core src main java com zhuinden simplestackcomposeintegration core ComposeIntegrationCore kt L61|https github com Zhuinden simple stack compose integration blob 8540b5a61ab44d15 en simplestackcomposeintegration core ComposeIntegrationCore kt>

Zach Klippenstein (he/him) [MOD] · Answer

I wonder if it has something to do with the fact that `DisposableEffect` won t execute until after the composition is committed which means the first frame will be composed without `isAnimating == true`

Adam Powell · Answer

Likely In more detail the composition will commit and the effect will run before layout and drawing but the launched coroutine will be dispatched and scheduled to start running after the frame draws

Adam Powell · Answer

Either way an effect can t influence the composition by way of feedback in the same frame

Adam Powell · Answer

You ll want to set up your initial state as part of the composition itself look to your initial state remember blocks

Adam Powell · Answer

You probably also want to use a LaunchedEffect rather than a DisposableEffect that launches as is that code can run concurrent with itself if the keys change You re already using rememberUpdatedState for the key you probably don t want both

zhuinden · Answer

< Zach Klippenstein he him MOD > even if i force the `isAnimating == true` it flickers thinking face just checked now ``` Composable fun RenderScreen modifier Modifier = Modifier val stateChange = stateChange return val callback = callback return var completionCallback by remember mutableStateOf lt StateChanger Callback gt null var isAnimating by remember mutableStateOf true true renders previous initially for fullWidth if completionCallback == callback isAnimating = true completionCallback = callback ```

zhuinden · Answer

okay i ve updated the code as per <https github com Zhuinden simple stack compose integration blob 1e659374bc51da57aba2ee2c4054b705091ef540 core src main java com zhuinden simplestackcomposeintegration core ComposeIntegrationCore kt L243|https github com Zhuinden simple stack compose integration blob 1e659374bc51da57 en simplestackcomposeintegration core ComposeIntegrationCore kt> and now am using `LaunchedEffect` instead of `DisposableEffect` + `rememberCoroutineScope`

zhuinden · Answer

and it looks like this ``` LaunchedEffect key1 = completionCallback block = animationProgress = 0 0f isAnimating = true lerping animateTo 1 0f animationConfiguration animationSpec animationProgress = this value isAnimating = false completionCallback stateChangeComplete ``` the flicker is still not gone weary

zhuinden · Answer

gt Either way an effect can t influence the composition by way of feedback in the same frame i m actually not sure what you mean here and i m also not sure where the first render is coming from I ve been punching this thing for about 10 hours now lol

zhuinden · Answer

how am i supposed to trigger an animation then

Zach Klippenstein (he/him) [MOD] · Answer

```isAnimating = true animationProgress = 0 0f``` I think these should be called directly from your composable function before reading them in your layouts so that the first frame that is composed reads the correct initial values

zhuinden · Answer

I will try that asap thanks

Doris Liu · Answer

Not `remember`ing the Animatable could cause issues as well there s no guarantee that recomposition won t happen during the animation and when it does you get a new `Animatable` with a new value if you don t remember it

Doris Liu · Answer

I d log the `animationProgress` after ``` animationProgress = this value``` to inspect whether there s any suspicious jump in `animationProgress`

zhuinden · Answer

remembering caused problems but maybe the problems were just a symptom

zhuinden · Answer

i ll check the recommendations now thanks +1

zhuinden · Answer

interesting i think setting isAnimating = true and animationProgress = 0 0f BEFORE the Layout s helped +1 heart

zhuinden · Answer

it s not perfect though there is still a flicker but at least it s not showing the new view on top of the previous view for a moment

Doris Liu · Answer

Curious what the flicker looks like if you don t mind sharing a video slightly smiling face

zhuinden · Answer

so new code is ``` val stateChange = stateChange return val callback = callback return var completionCallback by remember mutableStateOf lt StateChanger Callback gt null val topNewKey = stateChange topNewKey lt DefaultComposeKey gt val topPreviousKey = stateChange topPreviousKey lt DefaultComposeKey gt var isAnimating by remember mutableStateOf true val lerping = remember Animatable 0 0f Float VectorConverter 1 0f var animationProgress by remember mutableStateOf 0 0f if completionCallback == callback completionCallback = callback if topPreviousKey = null animationProgress = 0 0f isAnimating = true if topPreviousKey == null key topNewKey topNewKey RenderComposable modifier DisposableEffect key1 = completionCallback effect = completionCallback stateChangeComplete onDispose do nothing return var fullWidth by remember mutableStateOf 0 var fullHeight by remember mutableStateOf 0 val measurePolicy = MeasurePolicy measurables constraints gt val placeables = measurables fastMap it measure constraints val maxWidth = placeables fastMaxBy it width width 0 val maxHeight = placeables fastMaxBy it height height 0 if fullWidth == 0 amp amp maxWidth = 0 fullWidth = maxWidth if fullHeight == 0 amp amp maxHeight = 0 fullHeight = maxHeight layout maxWidth maxHeight placeables fastForEach placeable gt placeable place 0 0 Layout content = if fullWidth gt 0 amp amp fullHeight gt 0 key topNewKey topNewKey RenderComposable modifier measurePolicy = measurePolicy modifier = when isAnimating gt modifier else gt animationConfiguration customComposableTransitions newComposableTransition animateNewComposable modifier stateChange fullWidth fullHeight animationProgress Layout content = if isAnimating key topPreviousKey topPreviousKey RenderComposable modifier measurePolicy = measurePolicy modifier = when isAnimating gt modifier else gt animationConfiguration customComposableTransitions previousComposableTransition animatePreviousComposable modifier stateChange fullWidth fullHeight animationProgress LaunchedEffect key1 = completionCallback block = lerping animateTo 1 0f animationConfiguration animationSpec animationProgress = this value isAnimating = false lerping snapTo 0f completionCallback stateChangeComplete ```

zhuinden · Answer

it s as if the composable was removed and re added thinking face I ll get a vid

Doris Liu · Answer

I just noticed that the `Animatable` in the snippet above has a `VisibilityThreshold` precision of 1 0f That means it ll consider itself done when it s 1 0f away from the target That s likely not what you want I d recommend using the factory method `Animatable 0f ` or setting the `visibilityThreshold` to a much smaller number `0 01f` perhaps

zhuinden · Answer

it is now ` ```val lerping = remember Animatable 0 0f ```` the flicker in the video is still there though

zhuinden · Answer

i m not sure what causes this one smile at least the incorrectly rendered new view is gone haha

zhuinden · Answer

maybe the keys should be `rememberUpdatedState` d

zhuinden · Answer

nope no effect weary

zhuinden · Answer

maybe it is technically because the new key becomes the old key and there is a new key thinking face

zhuinden · Answer

so it makes sense for it to be swapped out but i figured `key ` lets me wrap that via structural equality

zhuinden · Answer

oh the dog list key is not data class that could easily cause problems eyes

zhuinden · Answer

still flickers joy

Doris Liu · Answer

One observation on the flicker I m seeing images popping in as they get loaded Not sure if that s intended to be handled with a fade So when it s a full page of images and they pop in all at once it causes a flicker There might be other flickers too

Doris Liu · Answer

This is what I see a few frames apart before vs after the images are loaded

zhuinden · Answer

yeah it appears that the switch of the screen from being `newKey RenderComposable ` to become `previousKey RenderComposable ` makes it become a new composable

zhuinden · Answer

I m not sure how to force them to be the same

Adam Powell · Answer

The position of the call in the function body is part of the identity

Adam Powell · Answer

For something to have the same identity it must be the same call e g ```val myKey = when myKey RenderComposable same call identity even when myKey changes```

zhuinden · Answer

oh i get it I ll figure something out then thanks

Doris Liu · Answer

Here s an example in `Crossfade` in case it helps <https cs android com androidx platform frameworks support + androidx main compose animation animation src commonMain kotlin androidx compose animation Crossfade kt l=85|https cs android com androidx platform frameworks support + androidx main compose ommonMain kotlin androidx compose animation Crossfade kt l=85>

zhuinden · Answer

okay i am now ensuring that the given key is rendered in the same position within the same layout and it still flickers joy

zhuinden · Answer

``` val stateChange = stateChange return val callback = callback return var completionCallback by remember mutableStateOf lt StateChanger Callback gt null val topNewKey by rememberUpdatedState newValue = stateChange topNewKey lt DefaultComposeKey gt val topPreviousKey by rememberUpdatedState newValue = stateChange topPreviousKey lt DefaultComposeKey gt var isAnimating by remember mutableStateOf false val lerping = remember Animatable 0 0f var animationProgress by remember mutableStateOf 0 0f var initialization by remember mutableStateOf true if completionCallback == callback completionCallback = callback if topPreviousKey = null initialization = false animationProgress = 0 0f isAnimating = true else initialization = true var fullWidth by remember mutableStateOf 0 var fullHeight by remember mutableStateOf 0 val measurePolicy = MeasurePolicy measurables constraints gt val placeables = measurables fastMap it measure constraints val maxWidth = placeables fastMaxBy it width width 0 val maxHeight = placeables fastMaxBy it height height 0 if fullWidth == 0 amp amp maxWidth = 0 fullWidth = maxWidth if fullHeight == 0 amp amp maxHeight = 0 fullHeight = maxHeight layout maxWidth maxHeight placeables fastForEach placeable gt placeable place 0 0 val keySlot1 by rememberUpdatedState when initialization gt topNewKey else gt topPreviousKey val keySlot2 by rememberUpdatedState when initialization gt topPreviousKey else gt topNewKey Layout content = if initialization || isAnimating keySlot1 RenderComposable modifier measurePolicy = measurePolicy modifier = when isAnimating || initialization gt modifier else gt animationConfiguration customComposableTransitions previousComposableTransition animateComposable modifier stateChange fullWidth fullHeight animationProgress Layout content = if initialization || isAnimating keySlot2 RenderComposable modifier measurePolicy = measurePolicy modifier = when isAnimating || initialization gt modifier else gt animationConfiguration customComposableTransitions newComposableTransition animateComposable modifier stateChange fullWidth fullHeight animationProgress LaunchedEffect key1 = completionCallback block = if topPreviousKey = null lerping animateTo 1 0f animationConfiguration animationSpec animationProgress = this value isAnimating = false lerping snapTo 0f completionCallback stateChangeComplete ```

zhuinden · Answer

maybe the problem is that i have 2 layout tags instead of putting them in a list with `key ` to render them each with a modifier pensive

zhuinden · Answer

hmm

zhuinden · Answer

i thought Crossfade was less applicable than AnimatedVisibilityImpl but maybe you re onto something I ll try to figure out how to merge my current behavior into this thing

zhuinden · Answer

right now it s <https github com Zhuinden simple stack compose integration blob fbbebe3162c17c6eb436bb9888d645f9e2b5908b core src main java com zhuinden simplestackcomposeintegration core ComposeIntegrationCore kt L151 L260|https github com Zhuinden simple stack compose integration blob fbbebe3162c17c6e en simplestackcomposeintegration core ComposeIntegrationCore kt>

Doris Liu · Answer

Crossfade is definitely more applicable to your use case than AnimatedVisibilityImpl slightly smiling face

Doris Liu · Answer

As Adam said the position of the call is a part of the composable identify You need to make sure the same composable is invoked in the same position in your code to not be treated as a new one

zhuinden · Answer

<https github com Zhuinden simple stack compose integration blob 73553725f120c61859b7196118169287f6e4f58f core src main java com zhuinden simplestackcomposeintegration core ComposeIntegrationCore kt L189 L228> i am doing that now and it still flickers i m officially out of ideas weary

zhuinden · Answer

or at least i think i am doing that now thinking face

zhuinden · Answer

the very first transition actually works

zhuinden · Answer

maybe i should log if they still get swapped or something after it s initialization

zhuinden · Answer

agh i really am switching them up still

zhuinden · Answer

rip

zhuinden · Answer

i m going to need a whiteboard for this

zhuinden · Answer

i have to redesign this entirely joy

zhuinden · Answer

<https github com Zhuinden simple stack compose integration blob bb3410086dd400416cbebe2f639e975c33ae7b66 core src main java com zhuinden simplestackcomposeintegration core ComposeIntegrationCore kt L192 L228|https github com Zhuinden simple stack compose integration blob bb3410086dd40041 en simplestackcomposeintegration core ComposeIntegrationCore kt> it technically works now Accompanist CoilImage is flickering but not the views heart

zhuinden · Answer

thank you everyone thanks adam + zach + doris heart

Shakil Karim · Answer

< zhuinden> Did you manage to solve this issue I have a similar issue with Image Flicking

zhuinden · Answer

yes i solved it with correct order of the saved state provider + key

zhuinden · Answer

and the for loop