diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/navigation/TopNavigation.kt b/app/src/main/kotlin/cn/super12138/todo/ui/navigation/TopNavigation.kt index d3de435..3528696 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/navigation/TopNavigation.kt +++ b/app/src/main/kotlin/cn/super12138/todo/ui/navigation/TopNavigation.kt @@ -2,6 +2,7 @@ package cn.super12138.todo.ui.navigation import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.SharedTransitionLayout +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.navigation3.runtime.NavKey @@ -22,28 +23,9 @@ import cn.super12138.todo.ui.pages.settings.SettingsMain import cn.super12138.todo.ui.pages.tasks.TasksPage import cn.super12138.todo.ui.theme.fadeThrough import cn.super12138.todo.ui.theme.materialSharedAxisX +import cn.super12138.todo.ui.theme.veilFade import cn.super12138.todo.ui.viewmodels.MainViewModel - -private const val INITIAL_OFFSET_FACTOR = 0.10f - -private fun settingsTransition() = NavDisplay.transitionSpec { - materialSharedAxisX( - initialOffsetX = { (it * INITIAL_OFFSET_FACTOR).toInt() }, - targetOffsetX = { -(it * INITIAL_OFFSET_FACTOR).toInt() } - ) -} + NavDisplay.popTransitionSpec { - materialSharedAxisX( - initialOffsetX = { -(it * INITIAL_OFFSET_FACTOR).toInt() }, - targetOffsetX = { (it * INITIAL_OFFSET_FACTOR).toInt() } - ) -} + NavDisplay.predictivePopTransitionSpec { - materialSharedAxisX( - initialOffsetX = { -(it * INITIAL_OFFSET_FACTOR).toInt() }, - targetOffsetX = { (it * INITIAL_OFFSET_FACTOR).toInt() } - ) -} - @OptIn(ExperimentalAnimationApi::class) @Composable fun TopNavigation( @@ -55,7 +37,33 @@ fun TopNavigation( backStack.removeLast() } -// val veilColor = MaterialTheme.colorScheme.surfaceDim + val veilColor = MaterialTheme.colorScheme.surfaceDim + fun editorTransition() = NavDisplay.transitionSpec { + veilFade(veilColor) + } + NavDisplay.popTransitionSpec { + veilFade(veilColor) + } + NavDisplay.predictivePopTransitionSpec { + veilFade(veilColor) + } + + val initialOffestFactor = 0.10f + fun settingsTransition() = NavDisplay.transitionSpec { + materialSharedAxisX( + initialOffsetX = { (it * initialOffestFactor).toInt() }, + targetOffsetX = { -(it * initialOffestFactor).toInt() } + ) + } + NavDisplay.popTransitionSpec { + materialSharedAxisX( + initialOffsetX = { -(it * initialOffestFactor).toInt() }, + targetOffsetX = { (it * initialOffestFactor).toInt() } + ) + } + NavDisplay.predictivePopTransitionSpec { + materialSharedAxisX( + initialOffsetX = { -(it * initialOffestFactor).toInt() }, + targetOffsetX = { (it * initialOffestFactor).toInt() } + ) + } + SharedTransitionLayout { NavDisplay( backStack = backStack.backStack, @@ -88,7 +96,7 @@ fun TopNavigation( ) } - entry { + entry(metadata = editorTransition()) { TodoAddPage( onSave = { viewModel.addTodo(it) @@ -98,7 +106,7 @@ fun TopNavigation( ) } - entry { editorArgs -> + entry(metadata = editorTransition()) { editorArgs -> TodoEditPage( toDo = editorArgs.toDo, onSave = { diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/editor/TodoEditorPage.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/editor/TodoEditorPage.kt index 8df1660..36abd1b 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/pages/editor/TodoEditorPage.kt +++ b/app/src/main/kotlin/cn/super12138/todo/ui/pages/editor/TodoEditorPage.kt @@ -53,10 +53,13 @@ fun SharedTransitionScope.TodoAddPage( onNavigateUp: () -> Unit ) = TodoEditorPage( toDo = null, - modifier = modifier.sharedBounds( - sharedContentState = rememberSharedContentState(key = Constants.KEY_TODO_FAB_TRANSITION), - animatedVisibilityScope = LocalNavAnimatedContentScope.current - ), + modifier = modifier + .sharedBounds( + sharedContentState = rememberSharedContentState(key = Constants.KEY_TODO_FAB_TRANSITION), + animatedVisibilityScope = LocalNavAnimatedContentScope.current, + resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds + ) + .skipToLookaheadSize(), // 这个修饰符必须放后面 onSave = onSave, onDelete = {}, onNavigateUp = onNavigateUp @@ -76,13 +79,14 @@ fun SharedTransitionScope.TodoEditPage( animatedVisibilityScope = LocalNavAnimatedContentScope.current, resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds ), + //TODO: 没想好加不加 .skipToLookaheadSize(), onSave = onSave, onDelete = onDelete, onNavigateUp = onNavigateUp ) @Composable -fun TodoEditorPage( +fun SharedTransitionScope.TodoEditorPage( modifier: Modifier = Modifier, toDo: TodoEntity? = null, onSave: (TodoEntity) -> Unit, diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/TasksPage.kt b/app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/TasksPage.kt index c3243d3..c63087e 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/TasksPage.kt +++ b/app/src/main/kotlin/cn/super12138/todo/ui/pages/tasks/TasksPage.kt @@ -27,7 +27,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.zIndex import androidx.navigation3.ui.LocalNavAnimatedContentScope import cn.super12138.todo.R import cn.super12138.todo.constants.Constants @@ -87,7 +86,8 @@ fun SharedTransitionScope.TasksPage( modifier = Modifier .sharedBounds( sharedContentState = rememberSharedContentState(key = Constants.KEY_TODO_FAB_TRANSITION), - animatedVisibilityScope = animatedVisibilityScope + animatedVisibilityScope = animatedVisibilityScope, + resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds ) .animateFloatingActionButton( visible = !inSelectedMode, diff --git a/app/src/main/kotlin/cn/super12138/todo/ui/theme/Motion.kt b/app/src/main/kotlin/cn/super12138/todo/ui/theme/Motion.kt index a8bcc64..ac01bb9 100644 --- a/app/src/main/kotlin/cn/super12138/todo/ui/theme/Motion.kt +++ b/app/src/main/kotlin/cn/super12138/todo/ui/theme/Motion.kt @@ -3,6 +3,7 @@ package cn.super12138.todo.ui.theme import androidx.compose.animation.ContentTransform import androidx.compose.animation.EnterTransition import androidx.compose.animation.ExitTransition +import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.core.FastOutLinearInEasing import androidx.compose.animation.core.FastOutSlowInEasing import androidx.compose.animation.core.LinearOutSlowInEasing @@ -12,6 +13,9 @@ import androidx.compose.animation.fadeOut import androidx.compose.animation.scaleIn import androidx.compose.animation.slideInHorizontally import androidx.compose.animation.slideOutHorizontally +import androidx.compose.animation.unveilIn +import androidx.compose.animation.veilOut +import androidx.compose.ui.graphics.Color /** * 来自：https://github.com/Ashinch/ReadYou/blob/main/app/src/main/java/me/ash/reader/ui/motion/MaterialSharedAxis.kt @@ -114,4 +118,37 @@ fun fadeThroughOut( durationMillis = durationMillis, easing = FastOutLinearInEasing ) -) \ No newline at end of file +) + +fun veilFade( + initialColor: Color, + durationMillis: Int = 200 +): ContentTransform = ContentTransform( + veilFadeIn( + initialColor = initialColor, + durationMillis = durationMillis + ), + veilFadeOut( + initialColor = initialColor, + durationMillis = durationMillis + ) +) + +@OptIn(ExperimentalAnimationApi::class) +fun veilFadeIn( + initialColor: Color, + durationMillis: Int = DefaultMotionDuration, +): EnterTransition = + fadeIn( + ) + unveilIn( + initialColor = initialColor + ) + +@OptIn(ExperimentalAnimationApi::class) +fun veilFadeOut( + initialColor: Color, + durationMillis: Int = DefaultMotionDuration, +): ExitTransition = + fadeOut() + veilOut( + targetColor = initialColor + ) \ No newline at end of file