年月视图切换时立即移除源视图，仅对目标视图播放缩放动画
之前月↔年切换使用交叉淡入：两层同时合成，源视图渐隐、目标视图渐显。 现改为单向过渡：先翻转 isYearView 让源视图立刻从合成中移除， withFrameNanos 等一帧后再启动目标视图的 scale/alpha 动画，避免抖动。
This commit is contained in:
meyou
parent
c28eb8d0e5
commit
aa223db519
@ -88,22 +88,26 @@ class CalendarViewModel(
|
||||
|
||||
/**
|
||||
* 切换年视图。仅在展开态可用。
|
||||
*
|
||||
* 切换瞬间立即翻转 isYearView，让对应方向的目标视图立刻接管渲染，
|
||||
* 当前视图被直接移除；动画只作用在目标视图的 scale/alpha 上。
|
||||
*/
|
||||
fun toggleYearView() {
|
||||
if (isCollapsed) return
|
||||
yearViewJob?.cancel()
|
||||
yearViewJob = coroutineScope.launch {
|
||||
if (isYearView) {
|
||||
// 年 → 月：先切换状态让月视图开始合成，再等一帧避免首帧抖动
|
||||
isYearView = false
|
||||
withFrameNanos { }
|
||||
_yearViewAnimatable.animateTo(
|
||||
0f, tween(400, easing = FastOutSlowInEasing)
|
||||
)
|
||||
isYearView = false
|
||||
} else {
|
||||
// 月 → 年：先切换状态让年视图开始合成
|
||||
yearViewYear = selectedDate.year
|
||||
isYearView = true
|
||||
_yearViewAnimatable.snapTo(0f)
|
||||
// 等待一帧让年视图先完成首次合成与布局，
|
||||
// 避免首次进入年视图时动画时间被合成开销吞掉。
|
||||
withFrameNanos { }
|
||||
_yearViewAnimatable.animateTo(
|
||||
1f, tween(400, easing = FastOutSlowInEasing)
|
||||
@ -120,12 +124,13 @@ class CalendarViewModel(
|
||||
val date = if (yearViewYear == today.year && today.month.number == month) today
|
||||
else LocalDate(yearViewYear, month, 1)
|
||||
selectedDate = date
|
||||
isYearView = false
|
||||
yearViewJob?.cancel()
|
||||
yearViewJob = coroutineScope.launch {
|
||||
withFrameNanos { }
|
||||
_yearViewAnimatable.animateTo(
|
||||
0f, tween(400, easing = FastOutSlowInEasing)
|
||||
)
|
||||
isYearView = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -168,13 +168,15 @@ fun CalendarMonthView(
|
||||
val anchorPivotX = ((currentMonth - 1) % 3 + 0.5f) / 3f
|
||||
val anchorPivotY = ((currentMonth - 1) / 3 + 0.5f) / 4f
|
||||
|
||||
// 月视图层缩放：从 1f 缩小到 ~0.3f（年网格单格 vs 月视图大小比）
|
||||
val monthScale = 1f - yearProgress * 0.7f
|
||||
val monthAlpha = (1f - yearProgress * 1.4f).coerceIn(0f, 1f)
|
||||
// 过渡进度：0=目标视图刚出现，1=目标视图完全到位。
|
||||
// 月→年时 yearProgress 从 0→1，年→月时从 1→0，因此用 isYearView 同步翻转方向。
|
||||
val transitionProgress = if (viewModel.isYearView) yearProgress else 1f - yearProgress
|
||||
val targetAlpha = transitionProgress.coerceIn(0f, 1f)
|
||||
|
||||
// 年视图层缩放：从 ~3.3f 放大到 1f
|
||||
val yearScale = lerp(3.3f, 1f, yearProgress)
|
||||
val yearAlpha = ((yearProgress - 0.2f) / 0.8f).coerceIn(0f, 1f)
|
||||
// 月视图层缩放：从 0.3f（年网格单格大小）放大到 1f
|
||||
val monthScale = lerp(0.3f, 1f, transitionProgress)
|
||||
// 年视图层缩放：从 3.3f（月视图被放大到一格那么大的反向比例）缩小到 1f
|
||||
val yearScale = lerp(3.3f, 1f, transitionProgress)
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
@ -185,16 +187,28 @@ fun CalendarMonthView(
|
||||
screenHeightPx = size.height
|
||||
}
|
||||
) {
|
||||
// 月视图层
|
||||
Column(
|
||||
// 月视图层：仅在非年视图时渲染，年视图激活时立即移除。
|
||||
if (!viewModel.isYearView) {
|
||||
val dragRangeMinPx = with(density) { DRAG_RANGE_MIN_DP.dp.toPx() }
|
||||
val dragRangePx = if (effectiveRowHeightPx > 0) {
|
||||
maxOf((effectiveWeeks - 1) * effectiveRowHeightPx.toFloat(), dragRangeMinPx)
|
||||
} else {
|
||||
dragRangeMinPx
|
||||
}
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.graphicsLayer {
|
||||
scaleX = monthScale
|
||||
scaleY = monthScale
|
||||
alpha = monthAlpha
|
||||
alpha = targetAlpha
|
||||
transformOrigin = TransformOrigin(anchorPivotX, anchorPivotY)
|
||||
}
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(horizontal = HORIZONTAL_PADDING_DP.dp)
|
||||
) {
|
||||
MonthHeader(
|
||||
@ -270,8 +284,21 @@ fun CalendarMonthView(
|
||||
}
|
||||
}
|
||||
|
||||
// 年视图层：HorizontalPager 支持左右滑动切年
|
||||
if (viewModel.isYearView || yearProgress > 0.01f) {
|
||||
if (cardHeightPx > 0) {
|
||||
BottomCard(
|
||||
viewModel = viewModel,
|
||||
dragRangePx = dragRangePx,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(with(density) { cardHeightPx.toDp() })
|
||||
.align(Alignment.BottomCenter)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 年视图层：仅在年视图激活时渲染；HorizontalPager 支持左右滑动切年。
|
||||
if (viewModel.isYearView) {
|
||||
HorizontalPager(
|
||||
state = yearPagerState,
|
||||
beyondViewportPageCount = 1,
|
||||
@ -281,7 +308,7 @@ fun CalendarMonthView(
|
||||
.graphicsLayer {
|
||||
scaleX = yearScale
|
||||
scaleY = yearScale
|
||||
alpha = yearAlpha
|
||||
alpha = targetAlpha
|
||||
transformOrigin = TransformOrigin(anchorPivotX, anchorPivotY)
|
||||
}
|
||||
.padding(horizontal = HORIZONTAL_PADDING_DP.dp)
|
||||
@ -312,26 +339,5 @@ fun CalendarMonthView(
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// BottomCard：年视图时隐藏
|
||||
if (yearProgress < 0.01f) {
|
||||
val dragRangeMinPx = with(density) { DRAG_RANGE_MIN_DP.dp.toPx() }
|
||||
val dragRangePx = if (effectiveRowHeightPx > 0) {
|
||||
maxOf((effectiveWeeks - 1) * effectiveRowHeightPx.toFloat(), dragRangeMinPx)
|
||||
} else {
|
||||
dragRangeMinPx
|
||||
}
|
||||
|
||||
if (cardHeightPx > 0) {
|
||||
BottomCard(
|
||||
viewModel = viewModel,
|
||||
dragRangePx = dragRangePx,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(with(density) { cardHeightPx.toDp() })
|
||||
.align(Alignment.BottomCenter)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user