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

refactor(date-recorder): use SharedTransitionLayout for smooth view mode card morphing

Browse Source
This commit is contained in:
xfy 2026-07-24 11:24:10 +08:00
parent 2a3da75859
commit 1248dff648
1 changed files with 369 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
core/src/main/kotlin/plus/rua/project/ui/DateRecorderScreen.kt
View File

@ -3,6 +3,10 @@ package plus.rua.project.ui
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
@ -700,6 +704,7 @@ private fun SortOrderDirectionOption(
}
}
}
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun RecordGrid(
records: List<DateRecord>,
@ -727,7 +732,16 @@ private fun RecordGrid(
}
}
val columns = when (viewMode) {
SharedTransitionLayout(modifier = Modifier.fillMaxSize()) {
AnimatedContent(
targetState = viewMode,
label = "date_recorder_view_mode_transition",
transitionSpec = {
fadeIn(tween(280)) togetherWith fadeOut(tween(280))
},
modifier = Modifier.fillMaxSize()
) { currentMode ->
val columns = when (currentMode) {
DateRecorderViewMode.TIMELINE -> GridCells.Fixed(1)
DateRecorderViewMode.GRID -> GridCells.Fixed(2)
DateRecorderViewMode.COMPACT -> GridCells.Adaptive(minSize = 100.dp)
@ -806,7 +820,6 @@ private fun RecordGrid(
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
groupedRecords.forEach { (monthTitle, monthRecords) ->
// 月份分组 Header (跨满整行)
item(
key = "header_$monthTitle",
span = { GridItemSpan(maxLineSpan) }
@ -821,28 +834,50 @@ private fun RecordGrid(
val photoUri = "file://${photoRoot.absoluteFileOf(record.photoPath).absolutePath}"
val isSelected = record.id in selectedIds
val cardModifier = Modifier.animateItem(
fadeInSpec = tween(300),
fadeOutSpec = tween(300),
placementSpec = spring(
stiffness = Spring.StiffnessMediumLow,
dampingRatio = Spring.DampingRatioMediumBouncy
)
)
AnimatedRecordCard(
when (currentMode) {
DateRecorderViewMode.TIMELINE -> {
TimelineRecordCard(
record = record,
photoUri = photoUri,
isSelected = isSelected,
selectionMode = selectionMode,
viewMode = viewMode,
animatedVisibilityScope = this@AnimatedContent,
onClick = {
if (selectionMode) onToggleSelection(record.id)
else onOpenRecord(record.id)
},
modifier = cardModifier
}
)
}
DateRecorderViewMode.GRID -> {
GridRecordCard(
record = record,
photoUri = photoUri,
isSelected = isSelected,
selectionMode = selectionMode,
animatedVisibilityScope = this@AnimatedContent,
onClick = {
if (selectionMode) onToggleSelection(record.id)
else onOpenRecord(record.id)
}
)
}
DateRecorderViewMode.COMPACT -> {
CompactRecordCard(
record = record,
photoUri = photoUri,
isSelected = isSelected,
selectionMode = selectionMode,
animatedVisibilityScope = this@AnimatedContent,
onClick = {
if (selectionMode) onToggleSelection(record.id)
else onOpenRecord(record.id)
}
)
}
}
}
}
}
}
}
}
@ -891,76 +926,42 @@ private fun MonthHeaderItem(title: String, count: Int) {
}
}
/** 支持视图切换平滑变形过渡的统一记录卡片。 */
@OptIn(ExperimentalLayoutApi::class)
/** 时光流模式 (TIMELINE) 卡片：宽幅展图、标题手记摘要、拍摄与关联日期 Badge。 */
@OptIn(ExperimentalSharedTransitionApi::class, ExperimentalLayoutApi::class)
@Composable
private fun AnimatedRecordCard(
private fun SharedTransitionScope.TimelineRecordCard(
record: DateRecord,
photoUri: String,
isSelected: Boolean,
selectionMode: Boolean,
viewMode: DateRecorderViewMode,
animatedVisibilityScope: AnimatedVisibilityScope,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
val targetCorner = when (viewMode) {
DateRecorderViewMode.TIMELINE -> 16.dp
DateRecorderViewMode.GRID -> 14.dp
DateRecorderViewMode.COMPACT -> 8.dp
}
val cornerRadius by animateDpAsState(
targetValue = targetCorner,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
label = "card_corner_radius"
)
val targetScale = if (selectionMode && isSelected) {
when (viewMode) {
DateRecorderViewMode.TIMELINE -> 0.96f
DateRecorderViewMode.GRID -> 0.95f
DateRecorderViewMode.COMPACT -> 0.92f
}
} else 1f
val cardScale by animateFloatAsState(
targetValue = targetScale,
targetValue = if (selectionMode && isSelected) 0.96f else 1f,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
label = "card_scale"
label = "timeline_card_scale"
)
val targetBorderWidth = if (selectionMode && isSelected) {
when (viewMode) {
DateRecorderViewMode.TIMELINE, DateRecorderViewMode.GRID -> 2.5.dp
DateRecorderViewMode.COMPACT -> 2.dp
}
} else 0.dp
val borderWidth by animateDpAsState(
targetValue = targetBorderWidth,
targetValue = if (selectionMode && isSelected) 2.5.dp else 0.dp,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
label = "card_border"
)
val defaultElevation = if (viewMode == DateRecorderViewMode.COMPACT) 0.dp else 1.dp
val elevation by animateDpAsState(
targetValue = defaultElevation,
animationSpec = tween(200),
label = "card_elevation"
label = "timeline_card_border"
)
Card(
onClick = onClick,
shape = RoundedCornerShape(cornerRadius),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceContainerLow
),
border = BorderStroke(borderWidth, MaterialTheme.colorScheme.primary),
elevation = CardDefaults.cardElevation(defaultElevation = elevation),
elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
modifier = modifier
.fillMaxWidth()
.animateContentSize(
animationSpec = spring(
stiffness = Spring.StiffnessLow,
dampingRatio = Spring.DampingRatioMediumBouncy
)
.sharedBounds(
sharedContentState = rememberSharedContentState(key = "card_${record.id}"),
animatedVisibilityScope = animatedVisibilityScope
)
.graphicsLayer {
scaleX = cardScale
@ -969,69 +970,19 @@ private fun AnimatedRecordCard(
) {
Column(modifier = Modifier.fillMaxWidth()) {
Box {
val imageModifier = when (viewMode) {
DateRecorderViewMode.TIMELINE -> Modifier
.fillMaxWidth()
.height(180.dp)
else -> Modifier
.fillMaxWidth()
.aspectRatio(1f)
}
AsyncImage(
uri = photoUri,
contentDescription = record.title,
contentScale = ContentScale.Crop,
modifier = imageModifier
)
// 底部蒙层与文字信息 (仅在 GRID 网格模式下展示)
androidx.compose.animation.AnimatedVisibility(
visible = viewMode == DateRecorderViewMode.GRID,
enter = fadeIn(tween(200)) + expandVertically(),
exit = fadeOut(tween(150)) + shrinkVertically(),
modifier = Modifier.align(Alignment.BottomStart)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(
Brush.verticalGradient(
colors = listOf(
Color.Transparent,
Color.Black.copy(alpha = 0.75f)
.height(180.dp)
.clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
.sharedElement(
sharedContentState = rememberSharedContentState(key = "photo_${record.id}"),
animatedVisibilityScope = animatedVisibilityScope
)
)
)
.padding(horizontal = 8.dp, vertical = 6.dp)
) {
Text(
text = record.title.ifBlank { "记录" },
style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.SemiBold),
color = Color.White,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(4.dp)
) {
Text(
text = "${record.shootDate}",
style = MaterialTheme.typography.labelSmall,
color = Color.White.copy(alpha = 0.85f)
)
if (record.linkedDate != null) {
Icon(
imageVector = Icons.Outlined.CalendarToday,
contentDescription = null,
tint = Color.White.copy(alpha = 0.85f),
modifier = Modifier.size(10.dp)
)
}
}
}
}
// 顶端多选 Badge
androidx.compose.animation.AnimatedVisibility(
@ -1040,18 +991,12 @@ private fun AnimatedRecordCard(
exit = scaleOut() + fadeOut(),
modifier = Modifier
.align(Alignment.TopEnd)
.padding(if (viewMode == DateRecorderViewMode.COMPACT) 6.dp else 8.dp)
.padding(10.dp)
) {
SelectionBadge(isSelected = isSelected)
}
}
// 时光流模式 (TIMELINE) 下的文字手记与日期 Tag 区域
androidx.compose.animation.AnimatedVisibility(
visible = viewMode == DateRecorderViewMode.TIMELINE,
enter = expandVertically(spring(stiffness = Spring.StiffnessLow)) + fadeIn(),
exit = shrinkVertically(spring(stiffness = Spring.StiffnessLow)) + fadeOut()
) {
Column(modifier = Modifier.padding(14.dp)) {
Text(
text = record.title.ifBlank { "无标题记录" },
@ -1102,6 +1047,181 @@ private fun AnimatedRecordCard(
}
}
}
/** 相册网格模式 (GRID) 卡片：双列拍立得相框与沉浸阴影。 */
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun SharedTransitionScope.GridRecordCard(
record: DateRecord,
photoUri: String,
isSelected: Boolean,
selectionMode: Boolean,
animatedVisibilityScope: AnimatedVisibilityScope,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
val cardScale by animateFloatAsState(
targetValue = if (selectionMode && isSelected) 0.95f else 1f,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
label = "grid_card_scale"
)
val borderWidth by animateDpAsState(
targetValue = if (selectionMode && isSelected) 2.5.dp else 0.dp,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
label = "grid_card_border"
)
Card(
onClick = onClick,
shape = RoundedCornerShape(14.dp),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerLow),
border = BorderStroke(borderWidth, MaterialTheme.colorScheme.primary),
elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
modifier = modifier
.fillMaxWidth()
.sharedBounds(
sharedContentState = rememberSharedContentState(key = "card_${record.id}"),
animatedVisibilityScope = animatedVisibilityScope
)
.graphicsLayer {
scaleX = cardScale
scaleY = cardScale
}
) {
Box {
AsyncImage(
uri = photoUri,
contentDescription = record.title,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.sharedElement(
sharedContentState = rememberSharedContentState(key = "photo_${record.id}"),
animatedVisibilityScope = animatedVisibilityScope
)
)
// 底部蒙层与文字信息
Column(
modifier = Modifier
.align(Alignment.BottomStart)
.fillMaxWidth()
.background(
Brush.verticalGradient(
colors = listOf(
Color.Transparent,
Color.Black.copy(alpha = 0.75f)
)
)
)
.padding(horizontal = 8.dp, vertical = 6.dp)
) {
Text(
text = record.title.ifBlank { "记录" },
style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.SemiBold),
color = Color.White,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(4.dp)
) {
Text(
text = "${record.shootDate}",
style = MaterialTheme.typography.labelSmall,
color = Color.White.copy(alpha = 0.85f)
)
if (record.linkedDate != null) {
Icon(
imageVector = Icons.Outlined.CalendarToday,
contentDescription = null,
tint = Color.White.copy(alpha = 0.85f),
modifier = Modifier.size(10.dp)
)
}
}
}
androidx.compose.animation.AnimatedVisibility(
visible = selectionMode,
enter = scaleIn(spring(dampingRatio = Spring.DampingRatioMediumBouncy)) + fadeIn(),
exit = scaleOut() + fadeOut(),
modifier = Modifier
.align(Alignment.TopEnd)
.padding(8.dp)
) {
SelectionBadge(isSelected = isSelected)
}
}
}
}
/** 紧凑矩阵模式 (COMPACT) 卡片：高效高密度。 */
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun SharedTransitionScope.CompactRecordCard(
record: DateRecord,
photoUri: String,
isSelected: Boolean,
selectionMode: Boolean,
animatedVisibilityScope: AnimatedVisibilityScope,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
val cardScale by animateFloatAsState(
targetValue = if (selectionMode && isSelected) 0.92f else 1f,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
label = "compact_card_scale"
)
val borderWidth by animateDpAsState(
targetValue = if (selectionMode && isSelected) 2.dp else 0.dp,
label = "compact_card_border"
)
Card(
onClick = onClick,
shape = RoundedCornerShape(8.dp),
border = BorderStroke(borderWidth, MaterialTheme.colorScheme.primary),
elevation = CardDefaults.cardElevation(defaultElevation = 0.dp),
modifier = modifier
.fillMaxWidth()
.sharedBounds(
sharedContentState = rememberSharedContentState(key = "card_${record.id}"),
animatedVisibilityScope = animatedVisibilityScope
)
.graphicsLayer {
scaleX = cardScale
scaleY = cardScale
}
) {
Box {
AsyncImage(
uri = photoUri,
contentDescription = record.title,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.sharedElement(
sharedContentState = rememberSharedContentState(key = "photo_${record.id}"),
animatedVisibilityScope = animatedVisibilityScope
)
)
androidx.compose.animation.AnimatedVisibility(
visible = selectionMode,
enter = scaleIn(spring(dampingRatio = Spring.DampingRatioMediumBouncy)) + fadeIn(),
exit = scaleOut() + fadeOut(),
modifier = Modifier
.align(Alignment.TopEnd)
.padding(6.dp)
) {
SelectionBadge(isSelected = isSelected)
}
}
}
}
/** 日期标签 Chip。 */