Hi! I want to create transition animation like thi...

# compose

[iamthevoid]

Hi! I want to create transition animation like this: next screen appears from bottom (and it less than previous), then it is increasing and slide to previous screen bounds. Like a plate when you put in plate stack. Seems that i can do it with AnimatedVisibility. expandIn + slideInVertically will do the thing. But whatever alignment param looks like it not working at all, i set it as Center, but next screen expands from side (video, gray background for better vision). Why can be that? (Code in Thread)

device-2021-08-09-120016.webm

[iamthevoid]

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun NewStackScreenAnim(content: @Composable AnimatedVisibilityScope.() -> Unit) {
    fun expandInitialSize(size: IntSize): IntSize = IntSize(size.width / 2, size.height / 2)
    EnterAnimation(
        enter = expandIn(
            Alignment.Center,
            ::expandInitialSize,
            animationSpec = tween(durationMillis = AnimationDuration)
        ),
        exit = shrinkOut(
            Alignment.Center,
            ::expandInitialSize,
            animationSpec = tween(durationMillis = AnimationDuration)
        ),
        content
    )
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun EnterAnimation(
    enter: EnterTransition = fadeIn(),
    exit: ExitTransition = fadeOut(),
    content: @Composable AnimatedVisibilityScope.() -> Unit
) {
    AnimatedVisibility(
        visibleState = remember { MutableTransitionState(initialState = false) }
            .apply { targetState = true },
        modifier = Modifier,
        enter = enter,
        exit = exit,
        content = content
    )
}

[iamthevoid]

I removed all except expand(shrink), but behavior the same

[iamthevoid]

I tried to set clip as true as false with same result

[iamthevoid]

in navigation usage looks like that

NavHost(navController = navController, startDestination = Screen.Splash.route) {
        
        ................

        composable(Screen.Login.route) {
            it.arguments?.onLoginCodeExtracted { authorized, code ->
                NewStackScreenAnim {
                    AuthorizationGraph(authorized, code, events, stateProvider)
                }
            }
        }
    }

[iamthevoid]

I understood why it happen. This animation always applied to root element, whatever it is in compose. When i wrap animation to Box all became work normally

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun NewStackScreenAnim(content: @Composable AnimatedVisibilityScope.() -> Unit) {
    fun initialSize(size: IntSize) = IntSize(width = size.width / 10 * 9, height = size.height / 10 * 9)
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        EnterAnimation(
            enter = expandIn(
                expandFrom = Alignment.Center,
                initialSize = ::initialSize,
                animationSpec = tween(AnimationDuration)
            ) +
                    slideInVertically({ it / 4 }, animationSpec = tween(AnimationDuration)) +
                    fadeIn(animationSpec = tween(AnimationDuration)),
            content = content
        )
    }
}