Rosetta/mobile-android
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance search animation in ChatsListScreen for smoother transitions

Browse Source
This commit is contained in:
senseiGai
2026-01-11 17:32:27 +05:00
parent 40b91d7f2c
commit ce56e11284
1 changed files with 26 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/src/main/java/com/rosetta/messenger/ui/chats/ChatsListScreen.kt
View File

@@ -379,45 +379,29 @@ fun ChatsListScreen(
} // Auto-focus when search opens } // Auto-focus when search opens
LaunchedEffect(isSearchExpanded) { LaunchedEffect(isSearchExpanded) {
if (isSearchExpanded) { if (isSearchExpanded) {
kotlinx.coroutines.delay(150) kotlinx.coroutines.delay(100)
focusRequester.requestFocus() focusRequester.requestFocus()
} }
} }
// Animated transition between title and search // Animate alpha for smooth fade without position changes
val searchProgress by val titleAlpha by animateFloatAsState(
animateFloatAsState( targetValue = if (isSearchExpanded) 0f else 1f,
targetValue = animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing),
if (isSearchExpanded) 1f label = "titleAlpha"
else 0f, )
animationSpec = val searchAlpha by animateFloatAsState(
tween( targetValue = if (isSearchExpanded) 1f else 0f,
durationMillis = 300, animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
easing = FastOutSlowInEasing label = "searchAlpha"
), )
label = "searchProgress"
)
Box(modifier = Modifier.fillMaxWidth()) { Box(modifier = Modifier.fillMaxWidth()) {
// Title - Triple click to open dev console // Title - Triple click to open dev console (stays in place, just fades)
if (searchProgress < 1f) { if (titleAlpha > 0.01f) {
Column( Column(
modifier = modifier = Modifier
Modifier.graphicsLayer { .clickable {
alpha = 1f - searchProgress
translationX =
-100f *
searchProgress
scaleX =
1f -
(0.2f *
searchProgress)
scaleY =
1f -
(0.2f *
searchProgress)
}
.clickable {
val currentTime = val currentTime =
System.currentTimeMillis() System.currentTimeMillis()
if (currentTime - if (currentTime -
@@ -440,6 +424,7 @@ fun ChatsListScreen(
lastClickTime = lastClickTime =
currentTime currentTime
} }
.graphicsLayer { alpha = titleAlpha }
) { ) {
Text( Text(
"Rosetta", "Rosetta",
@@ -476,39 +461,19 @@ fun ChatsListScreen(
} }
} }
// Search TextField with awesome animation // Search TextField (appears on top with fade)
if (searchProgress > 0f) { if (searchAlpha > 0.01f) {
Row( Row(
verticalAlignment = verticalAlignment =
Alignment.CenterVertically, Alignment.CenterVertically,
modifier = modifier = Modifier.fillMaxWidth()
Modifier.fillMaxWidth() .graphicsLayer { alpha = searchAlpha }
.graphicsLayer {
alpha =
searchProgress
translationX =
200f *
(1f -
searchProgress)
scaleX =
0.8f +
(0.2f *
searchProgress)
scaleY =
0.8f +
(0.2f *
searchProgress)
}
) { ) {
// Animated back arrow with fade // Back arrow
IconButton( IconButton(
onClick = { onClick = {
searchViewModel.collapseSearch() searchViewModel.collapseSearch()
}, }
modifier =
Modifier.graphicsLayer {
alpha = searchProgress
}
) { ) {
Icon( Icon(
Icons.Default.ArrowBack, Icons.Default.ArrowBack,
@@ -569,23 +534,19 @@ fun ChatsListScreen(
) )
) )
// Animated underline // Underline
Box( Box(
modifier = modifier =
Modifier.align( Modifier.align(
Alignment Alignment
.BottomCenter .BottomCenter
) )
.fillMaxWidth( .fillMaxWidth()
searchProgress
)
.height(2.dp) .height(2.dp)
.background( .background(
PrimaryBlue PrimaryBlue
.copy( .copy(
alpha = alpha = 0.8f
0.8f *
searchProgress
), ),
RoundedCornerShape( RoundedCornerShape(
1.dp 1.dp