Skip to content

Instantly share code, notes, and snippets.

@c5inco
Last active December 7, 2023 08:12
Show Gist options
  • Star 26 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save c5inco/796edc5d88e8561872380b61e6089c04 to your computer and use it in GitHub Desktop.
Save c5inco/796edc5d88e8561872380b61e6089c04 to your computer and use it in GitHub Desktop.
Reusable transitions that map to Material 2 motion system - https://material.io/develop/android/theming/motion
// Requires Compose 1.1.0-alpha02+
// Best used with navigation animation transitions in Accompanist 0.17.0+
import androidx.compose.animation.*
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
val SharedXAxisEnterTransition: (Density) -> EnterTransition = { density ->
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
with(density) { 30.dp.roundToPx() }
}
}
val SharedXAxisExitTransition: (Density) -> ExitTransition = { density ->
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
with(density) { (-30).dp.roundToPx() }
}
}
val SharedYAxisEnterTransition: (Density) -> EnterTransition = { density ->
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
slideInVertically(animationSpec = tween(durationMillis = 300)) {
with(density) { 30.dp.roundToPx() }
}
}
val SharedYAxisExitTransition: (Density) -> ExitTransition = { density ->
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
slideOutVertically(animationSpec = tween(durationMillis = 300)) {
with(density) { (-30).dp.roundToPx() }
}
}
@ExperimentalAnimationApi
val SharedZAxisEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
scaleIn(initialScale = 0.8f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val SharedZAxisVariantEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 60, delayMillis = 60, easing = LinearEasing)) +
scaleIn(initialScale = 0.8f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val SharedZAxisExitTransition =
fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
scaleOut(targetScale = 1.1f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val SharedZAxisVariantExitTransition = scaleOut(targetScale = 1.1f, animationSpec = tween(durationMillis = 300))
@ExperimentalAnimationApi
val FadeThroughEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
scaleIn(initialScale = 0.92f, animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing))
val FadeThroughExitTransition = fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing))
@ExperimentalAnimationApi
val FadeEnterTransition =
fadeIn(animationSpec = tween(durationMillis = 45, easing = LinearEasing)) +
scaleIn(initialScale = 0.8f, animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing))
val FadeExitTransition = fadeOut(animationSpec = tween(durationMillis = 75, easing = LinearEasing))
@doris4lt
Copy link

Looks good to me. Just a couple of nits:

  1. Consider having the initial/targetOffset param in slideIn/Out as the trailing lambda.
  2. All APIs used here except scaleIn/Out have been graduated to stable. Suggest adding the OptIn to only where scaleIn/Out is used. :)

@c5inco
Copy link
Author

c5inco commented Nov 25, 2021

Thanks for the feedback - incorporated in the latest revision!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment