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

Add page fade-in/fade-out transition to CalendarPager and WeekPager

Browse Source 
Use pagerState.currentPageOffsetFraction to compute alpha for page content:
alpha drops from 1 to 0 as offset goes from 0% to 30%, preventing
mid-point brightness dip (combined alpha of adjacent pages always >= 1f).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
xfy 2026-05-15 17:47:23 +08:00
parent 11ace14e10
commit 2411416eb7
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
shared/src/commonMain/kotlin/plus/rua/project/ui/CalendarPager.kt
View File

@ -9,10 +9,12 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.snapshotFlow import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import kotlinx.coroutines.flow.drop import kotlinx.coroutines.flow.drop
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlinx.datetime.LocalDate import kotlinx.datetime.LocalDate
import kotlinx.datetime.number import kotlinx.datetime.number
import kotlin.math.abs
/** /**
* 月度日历分页器，HorizontalPager 实现无限左右滑动切换月份。 * 月度日历分页器，HorizontalPager 实现无限左右滑动切换月份。
@ -63,6 +65,8 @@ fun CalendarPager(
flingBehavior = PagerDefaults.flingBehavior(state = pagerState), flingBehavior = PagerDefaults.flingBehavior(state = pagerState),
modifier = modifier modifier = modifier
) { page -> ) { page ->
val pageOffset = abs(pagerState.currentPageOffsetFraction)
val alpha = 1f - pageOffset.coerceIn(0f, 0.3f) / 0.3f
val (year, month) = pageToYearMonth(page, initialYear, initialMonth) val (year, month) = pageToYearMonth(page, initialYear, initialMonth)
CalendarMonthPage( CalendarMonthPage(
year = year, year = year,
@ -87,7 +91,8 @@ fun CalendarPager(
collapseProgress = collapseProgress, collapseProgress = collapseProgress,
rowHeightPx = rowHeightPx, rowHeightPx = rowHeightPx,
effectiveWeeks = effectiveWeeks, effectiveWeeks = effectiveWeeks,
onRowHeightMeasured = onRowHeightMeasured onRowHeightMeasured = onRowHeightMeasured,
modifier = Modifier.alpha(alpha)
) )
} }
} }

5
shared/src/commonMain/kotlin/plus/rua/project/ui/WeekPager.kt
View File

@ -11,7 +11,9 @@ import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import kotlin.math.abs
import kotlinx.coroutines.flow.drop import kotlinx.coroutines.flow.drop
import kotlinx.datetime.DatePeriod import kotlinx.datetime.DatePeriod
import kotlinx.datetime.LocalDate import kotlinx.datetime.LocalDate
@ -53,9 +55,12 @@ fun WeekPager(
flingBehavior = PagerDefaults.flingBehavior(state = pagerState), flingBehavior = PagerDefaults.flingBehavior(state = pagerState),
modifier = modifier modifier = modifier
) { page -> ) { page ->
val pageOffset = abs(pagerState.currentPageOffsetFraction)
val alpha = 1f - pageOffset.coerceIn(0f, 0.3f) / 0.3f
val weekMonday = pageToWeekMonday(page, initialWeekMonday) val weekMonday = pageToWeekMonday(page, initialWeekMonday)
Row( Row(
modifier = Modifier modifier = Modifier
.alpha(alpha)
.fillMaxWidth() .fillMaxWidth()
.padding(vertical = ROW_PADDING_DP.dp) .padding(vertical = ROW_PADDING_DP.dp)
) { ) {