Last active
December 7, 2023 08:12
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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)) |
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
Looks good to me. Just a couple of nits:
initial/targetOffset
param in slideIn/Out as the trailing lambda.scaleIn/Out
have been graduated to stable. Suggest adding theOptIn
to only wherescaleIn/Out
is used. :)