From da0728d3904c14a520fdf666bbe11f2dce61a5e7 Mon Sep 17 00:00:00 2001 From: Super12138 <70494801+Super12138@users.noreply.github.com> Date: Sun, 8 Feb 2026 11:27:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20FAB=20?= =?UTF-8?q?=E5=85=B1=E4=BA=AB=E5=85=83=E7=B4=A0=E8=BD=AC=E5=9C=BA=E5=8A=A8?= =?UTF-8?q?=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../todo/ui/navigation/TopNavigation.kt | 54 +++++++++++-------- .../todo/ui/pages/editor/TodoEditorPage.kt | 14 +++-- .../todo/ui/pages/tasks/TasksPage.kt | 4 +- .../cn/super12138/todo/ui/theme/Motion.kt | 39 +++++++++++++- 4 files changed, 80 insertions(+), 31 deletions(-) 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