Compose Animation Integration

Important

This module is a case of studies that shows how you can extend Kotlin Routing to your context.

This module add support to animate between composable routes. The animation concept here is based in the Jetpack Navigation animation.

sourceSets {
    commonMain.dependencies {
        implementation("dev.programadorthi.routing:compose-animation:$version")
    }
}

Setup the composable

By the way the setup is the same to compose module but with more parameters.

import dev.programadorthi.routing.compose.animation.Routing
// ...

val router = routing {
    // ...
}

@Composable
fun App() {
    Routing(
        routing = router,
        startUri = "/start",
        enterTransition = {
            // going from A to B it is the transition applied to B
        },
        exitTransition = {
            // going from A to B it is the transition applied to A
        },
        popEnterTransition = {
            // pop from B to A it is the transition applied to A
            // default to the `enterTransition`
        },
        popExitTransition = {
            // pop from B to A it is the transition applied to B
            // default to the `exitTransition`
        },
    )
}

Define composable handlers

Setup transitions in the composable handlers will override the global definitions to that route only.

import dev.programadorthi.routing.compose.animation.composable
// ...

val router = routing {
    composable(
        // ...,
        enterTransition = {
            // going from A to B it is the transition applied to B
        },
        exitTransition = {
            // going from A to B it is the transition applied to A
        },
        popEnterTransition = {
            // pop from B to A it is the transition applied to A
            // default to the `enterTransition`
        },
        popExitTransition = {
            // pop from B to A it is the transition applied to B
            // default to the `exitTransition`
        },
    ) {
        YourComposable()
    }
}

Transition informations

Sometimes is required getting information about the transition to do some logic based on it.

Enter transition

import dev.programadorthi.routing.compose.animation.nextCall
import dev.programadorthi.routing.compose.animation.previousCall
//...

enterTransition = {
    // going from A to B it is the transition applied to B
    val ACall: ApplicationCall? = previousCall
    val BCall: ApplicationCall? = nextCall
    // ...
}

Exit transition

import dev.programadorthi.routing.compose.animation.nextCall
import dev.programadorthi.routing.compose.animation.previousCall
//...

exitTransition = {
    // going from A to B it is the transition applied to A
    val ACall: ApplicationCall? = previousCall
    val BCall: ApplicationCall? = nextCall
    // ...
}

Pop Enter transition

import dev.programadorthi.routing.compose.animation.nextCall
import dev.programadorthi.routing.compose.animation.previousCall
//...

popEnterTransition = {
    // pop from B to A it is the transition applied to A
    val BCall: ApplicationCall? = previousCall
    val ACall: ApplicationCall? = nextCall
    // ...
}

Pop Exit transition

import dev.programadorthi.routing.compose.animation.nextCall
import dev.programadorthi.routing.compose.animation.previousCall
//...

popExitTransition = {
    // pop from B to A it is the transition applied to B
    val BCall: ApplicationCall? = previousCall
    val ACall: ApplicationCall? = nextCall
    // ...
}