xfy/yayacal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 页面切换添加滑入滑出动效

Browse Source 
使用 AnimatedContent 为 Main/About/Licenses 导航添加方向感知的
slide + fade 转场动画，向前导航从右滑入，返回从左滑入。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xfy 2026-05-19 17:45:24 +08:00
parent 0b1d89f06d
commit 58ab7eab4e
1 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
shared/src/commonMain/kotlin/plus/rua/project/App.kt
View File

@ -1,6 +1,13 @@
package plus.rua.project
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
@ -27,23 +34,39 @@ fun App() {
val colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
MaterialTheme(colorScheme = colorScheme) {
when (currentScreen) {
Screen.Main -> CalendarMonthView(
modifier = Modifier,
onNavigateToAbout = { currentScreen = Screen.About }
)
Screen.About -> {
BackHandler { currentScreen = Screen.Main }
AboutScreen(
onBack = { currentScreen = Screen.Main },
onNavigateToLicenses = { currentScreen = Screen.Licenses }
)
}
Screen.Licenses -> {
BackHandler { currentScreen = Screen.About }
LicensesScreen(
onBack = { currentScreen = Screen.About }
AnimatedContent(
targetState = currentScreen,
transitionSpec = {
if (targetState.ordinal > initialState.ordinal) {
// 向前导航：新页面从右侧滑入覆盖，旧页面略微左移+淡出
(slideInHorizontally { it } + fadeIn()) togetherWith
(slideOutHorizontally { -it / 4 } + fadeOut())
} else {
// 向后导航：新页面从左侧滑入，旧页面略微右移+淡出
(slideInHorizontally { -it } + fadeIn()) togetherWith
(slideOutHorizontally { it / 4 } + fadeOut())
}
},
modifier = Modifier.fillMaxSize()
) { screen ->
when (screen) {
Screen.Main -> CalendarMonthView(
modifier = Modifier,
onNavigateToAbout = { currentScreen = Screen.About }
)
Screen.About -> {
BackHandler { currentScreen = Screen.Main }
AboutScreen(
onBack = { currentScreen = Screen.Main },
onNavigateToLicenses = { currentScreen = Screen.Licenses }
)
}
Screen.Licenses -> {
BackHandler { currentScreen = Screen.About }
LicensesScreen(
onBack = { currentScreen = Screen.About }
)
}
}
}
}