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

Add AnimatedContent slide+fade transition to MonthHeader month and week number text

Browse Source 
When month or week number changes, the text slides vertically with fade:
upward for increasing values, downward for decreasing values, using
slideInVertically/slideOutVertically with tween(250).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
xfy 2026-05-15 17:50:15 +08:00
parent 8913e5ff0d
commit d755178b81
1 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
shared/src/commonMain/kotlin/plus/rua/project/ui/MonthHeader.kt
View File

@ -1,5 +1,12 @@
package plus.rua.project.ui
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
@ -33,14 +40,40 @@ fun MonthHeader(
.padding(vertical = 14.dp, horizontal = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = "${year}年${month}月",
style = MaterialTheme.typography.titleLarge
)
AnimatedContent(
targetState = Pair(year, month),
transitionSpec = {
if (targetState.second > initialState.second) {
slideInVertically(tween(250)) { -it } + fadeIn(tween(250)) togetherWith
slideOutVertically(tween(250)) { it } + fadeOut(tween(250))
} else {
slideInVertically(tween(250)) { it } + fadeIn(tween(250)) togetherWith
slideOutVertically(tween(250)) { -it } + fadeOut(tween(250))
}
}
) { (y, m) ->
Text(
text = "${y}年${m}月",
style = MaterialTheme.typography.titleLarge
)
}
Spacer(modifier = Modifier.width(6.dp))
Text(
text = "第${weekNumber}周",
style = MaterialTheme.typography.bodySmall
)
AnimatedContent(
targetState = weekNumber,
transitionSpec = {
if (targetState > initialState) {
slideInVertically(tween(250)) { -it } + fadeIn(tween(250)) togetherWith
slideOutVertically(tween(250)) { it } + fadeOut(tween(250))
} else {
slideInVertically(tween(250)) { it } + fadeIn(tween(250)) togetherWith
slideOutVertically(tween(250)) { -it } + fadeOut(tween(250))
}
}
) { week ->
Text(
text = "第${week}周",
style = MaterialTheme.typography.bodySmall
)
}
}
}