Add fade-out effect for non-selected rows during calendar collapse

Non-selected rows now fade out with alpha = 1f - collapseProgress via
graphicsLayer, naturally following the spring animation curve. When
rowScale < 0.1f and collapseProgress > 0.9f, DayCell rendering is
skipped and replaced with an empty Spacer to reduce draw overhead at
the end of the collapse animation.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
xfy 2026-05-15 17:46:47 +08:00
parent 6351caf776
commit 11ace14e10

View File

@ -2,6 +2,7 @@ package plus.rua.project.ui
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.offset
@ -10,6 +11,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
@ -110,6 +112,8 @@ fun CalendarMonthPage(
val shouldShow = rowHeightDp == null || rowHeightDp > 0.dp val shouldShow = rowHeightDp == null || rowHeightDp > 0.dp
val skipDayCells = (isAbove || isBelow) && rowScale < 0.1f && collapseProgress > 0.9f
if (shouldShow) { if (shouldShow) {
Row( Row(
modifier = Modifier modifier = Modifier
@ -130,7 +134,14 @@ fun CalendarMonthPage(
} else Modifier } else Modifier
) )
.padding(vertical = ROW_PADDING_DP.dp) .padding(vertical = ROW_PADDING_DP.dp)
.then(
if (isAbove || isBelow) Modifier.graphicsLayer { alpha = 1f - collapseProgress }
else Modifier
)
) { ) {
if (skipDayCells) {
Spacer(Modifier.weight(1f))
} else {
week.forEach { dayData -> week.forEach { dayData ->
DayCell( DayCell(
date = dayData.date, date = dayData.date,
@ -146,6 +157,7 @@ fun CalendarMonthPage(
} }
} }
} }
}
private data class DayData( private data class DayData(
val date: LocalDate, val date: LocalDate,