Hi Yall, I’m trying to animate (crossfade) two vie...

# compose-android

[Killian]

Hi Yall, I’m trying to animate (crossfade) two views in an animation but for the love of it I cannot wrap my head around the compose animtation API’s.

So far I’ve tried a bunch of different things, for example like:

val transition = rememberInfiniteTransition(label = "transition")
    val visibility by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 6.seconds.inWholeMilliseconds.toInt(),
            ),
            repeatMode = RepeatMode.Reverse
        ), label = "visibility"
    )

and then the views

Box {
                Text(
                    modifier = Modifier.alpha(visibility),
                    text = "One view"
                )

                Text(
                    modifier = Modifier.alpha(1f - visibility),
                    text = "Other view"
                )
            }

Though the effect I’m trying to go for is that one view is shown for 6 seconds, and then it should fade in a second into the other view and show that for 6 seconds and this should continue infinite amount of times. Any tips or articles or pointers I could use? Thanks in advance! 🙂

[Stylianos Gakis]

Have you looked into transition.AnimatedContent instead?
It allows you to define the spec for entering and exiting as you wish

[Filip Wiesner]

Or just Crossfade specifically 😄

[Killian]

I tried with Crossfade, though that transitions between two states indeed, but it does not allow me to specify an infinite transition:

[Filip Wiesner]

You can simply toggle the targetState every 6 seconds. It's a quick and dirty solution, although it may not be the best one.

[Killian]

In a job started in a LaunchedEffect that calls a delay each time you mean? Do I understand that correctly?

I am looking for an idiomatic approach though 🙂

[Stylianos Gakis]

LaunchedEffect(Unit) {
  while(isActive) {
    delay(6.seconds)
    state = #1
    delay(6.seconds)
    state = #2
  }
}

🤷

rememberUpdatedTransition seems to be the one with support for CrossFade or AnimatedContent. Don’t know how much it’d make sense for content to be animated this way backed by an *infinite*Transition, but maybe make a feature request if you feel like it to see what they say

[Filip Wiesner]

I think I've read somewhere that AnimatedContent will support manually updating animation progress (for predictive back gesture), so that would enable you to have infinite transition.

[Killian]

Thanks @Stylianos Gakis that would indeed work, do you think it’s possible to achieve this without the use of the LaunchedEffect and just any of the animation API’s? It seems the usage of delay is something that the transition.animateFloat also supports.. I just cannot figure out how to make it do what I want.

[Stylianos Gakis]

File a FR https://issuetracker.google.com/issues/new?component=1070767&template=1626715 if it does not exist. They will point you to the right direction if something is there that we’re missing here

[Killian]

It delays the transition state change for the given duration, and then it does it’s thing. Combined with the RepeatMode.Reverse it also reverses right after; ignoring the delay on it’s way back sort of. 🤷

[Albert Chang]

You can use something like this:

infiniteRepeatable(
    animation = keyframes {
        durationMillis = 7000
        0f at 3000
        1f at 4000
    },
    repeatMode = RepeatMode.Reverse,
    initialStartOffset = StartOffset(3000)
)