Recommended way to control screen transition animations

[Yoon-Chan]

I'm using circuit and hilt.
Could you please tell me the recommended way to apply animations when transitioning between screens?

I'd like Screen A to use the Enter fadeIn and Exit fadeOut animations, Screen B to use None, and Screen C to use the Circuit.Default animation.

[stagg]

Its still experimental but we have AnimatedScreenTransform for this, can be used to customize the various ContentTransform aspects for a navigation event.

circuit/circuit-foundation/src/commonMain/kotlin/com/slack/circuit/foundation/animation/AnimatedScreenTransform.kt

Lines 13 to 42 in 5634d63

	/**
	* Defines the animated transitions fo a [Screen] based on particular [AnimatedNavEvent]s.
	*
	* This interface allows you to customize the [EnterTransition], z-index, and [SizeTransform] for a
	* [Screen] as it becomes the top screen or is replaced by another [Screen] in the navigation stack.
	* You can also customize the [ExitTransition] for a screen that is no longer the top screen.
	*
	* Each of these can be customized based on the [AnimatedNavEvent] that triggered the transition.
	*
	* ### Example
	*
	* ```kotlin
	* object CustomScreenAnimatedTransform : AnimatedScreenTransform {
	*
	* override fun AnimatedContentTransitionScope<AnimatedNavState>.enterTransition(
	* animatedNavEvent: AnimatedNavEvent
	* ): EnterTransition? {
	* // Coming from `HomeScreen` we override the transition to slide in horizontally.
	* return if (initialState.screen is HomeScreen) slideInHorizontally() else null
	* }
	*
	* override fun AnimatedContentTransitionScope<AnimatedNavState>.exitTransition(
	* animatedNavEvent: AnimatedNavEvent
	* ): ExitTransition? {
	* // Going to `HomeScreen` we override the transition fade out.
	* return if (targetState.screen is HomeScreen) fadeOut() else null
	* }
	* }
	* ```
	*/

Couple example uses in the star sample:

circuit/samples/star/src/commonMain/kotlin/com/slack/circuit/star/animation/AnimatedNavigationOverride.kt

Lines 18 to 28 in 5634d63

	object PetDetailAnimatedScreenTransform : AnimatedScreenTransform {
	override fun AnimatedContentTransitionScope<AnimatedNavState>.enterTransition(
	animatedNavEvent: AnimatedNavEvent
	): EnterTransition? {
	// Going to the detail screen
	if (initialState.top.screen !is HomeScreen) return null
	if (!targetState.top.screen.isSharedElementDetailScreen()) return null
	return EnterTransition.None
	}

They get added to the Circuit instance via addAnimatedScreenTransforms.

circuit/samples/star/src/androidMain/kotlin/com/slack/circuit/star/MainActivity.kt

Lines 76 to 84 in 5634d63

	val localCircuit =
	circuit
	.newBuilder()
	// todo DI this
	.addAnimatedScreenTransforms(
	HomeScreen::class to HomeAnimatedScreenTransform,
	PetDetailScreen::class to PetDetailAnimatedScreenTransform,
	)
	.build()