Skip to content

Commit

Permalink
Fix default decoration backwards transition (#1191)
Browse files Browse the repository at this point in the history
## Fix
- The backwards exit transition was looking off from some combination of
slide out and horizontal shrink.
- This removes the horizontal shrink on the backwards exit transition
and adjusts some of the timing to mirror the forward transition better

## Demo

|Before|After|
|-|-|
|<video
src="https://github.com/slackhq/circuit/assets/3268847/82785179-0b42-4149-b286-e46fdcd2e3a4"></video>|<video
src="https://github.com/slackhq/circuit/assets/3268847/20b41725-1b0d-46b1-b454-677ceeb62d95"></video>|
  • Loading branch information
stagg authored Feb 9, 2024
1 parent 6ca51b8 commit 8370bb3
Showing 1 changed file with 36 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ package com.slack.circuit.foundation

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.LinearEasing
Expand Down Expand Up @@ -32,6 +34,7 @@ import com.slack.circuit.backstack.NavDecoration
import com.slack.circuit.backstack.ProvidedValues
import com.slack.circuit.backstack.isEmpty
import com.slack.circuit.backstack.providedValuesForBackStack
import com.slack.circuit.foundation.NavigatorDefaults.DefaultDecoration.backward
import com.slack.circuit.retained.CanRetainChecker
import com.slack.circuit.retained.LocalCanRetainChecker
import com.slack.circuit.retained.LocalRetainedStateRegistry
Expand Down Expand Up @@ -238,35 +241,52 @@ public object NavigatorDefaults {
val enterTransition =
fadeIn(
animationSpec =
tween(durationMillis = SHORT_DURATION, delayMillis = 50, easing = LinearEasing)
tween(
durationMillis = SHORT_DURATION,
delayMillis = if (sign > 0) 50 else 0,
easing = LinearEasing,
)
) +
slideInHorizontally(
initialOffsetX = { fullWidth -> (fullWidth / 10) * sign },
animationSpec =
tween(durationMillis = NORMAL_DURATION, easing = FastOutExtraSlowInEasing),
) +
expandHorizontally(
animationSpec =
tween(durationMillis = NORMAL_DURATION, easing = FastOutExtraSlowInEasing),
initialWidth = { (it * .9f).toInt() },
expandFrom = Alignment.Start,
)
if (sign > 0) {
expandHorizontally(
animationSpec =
tween(durationMillis = NORMAL_DURATION, easing = FastOutExtraSlowInEasing),
initialWidth = { (it * .9f).toInt() },
expandFrom = if (sign > 0) Alignment.Start else Alignment.End,
)
} else {
EnterTransition.None
}

val exitTransition =
fadeOut(
animationSpec = tween(durationMillis = NORMAL_DURATION, easing = AccelerateEasing)
animationSpec =
tween(
durationMillis = if (sign > 0) NORMAL_DURATION else SHORT_DURATION,
delayMillis = if (sign > 0) 0 else 50,
easing = AccelerateEasing,
)
) +
slideOutHorizontally(
targetOffsetX = { fullWidth -> (fullWidth / 10) * -sign },
animationSpec =
tween(durationMillis = NORMAL_DURATION, easing = FastOutExtraSlowInEasing),
) +
shrinkHorizontally(
animationSpec =
tween(durationMillis = NORMAL_DURATION, easing = FastOutExtraSlowInEasing),
targetWidth = { (it * .9f).toInt() },
shrinkTowards = Alignment.End,
)
if (sign > 0) {
shrinkHorizontally(
animationSpec =
tween(durationMillis = NORMAL_DURATION, easing = FastOutExtraSlowInEasing),
targetWidth = { (it * .9f).toInt() },
shrinkTowards = Alignment.End,
)
} else {
ExitTransition.None
}

return enterTransition togetherWith exitTransition
}
Expand All @@ -283,7 +303,8 @@ public object NavigatorDefaults {
targetState = args,
modifier = modifier,
transitionSpec = {
// A transitionSpec should only use values passed into the `AnimatedContent`, to minimize
// A transitionSpec should only use values passed into the `AnimatedContent`, to
// minimize
// the transitionSpec recomposing. The states are available as `targetState` and
// `initialState`
val diff = targetState.size - initialState.size
Expand Down

0 comments on commit 8370bb3

Please sign in to comment.