我有以下影片：
問題是：
當影片開始時，搜索圖示（放大鏡）會立即滑動到螢屏左側。
當搜索欄向后折疊時，圖示會平滑移動，接近尾聲時會加速。
我在這里想要實作的是讓這個圖示滑動更流暢，以獲得更好的體驗。
有什么方法可以實作嗎？
負責影片的代碼：
IconButton(onClick = {
isSearchEnabled = !isSearchEnabled
}) {
Icon(Icons.Default.Search, "search")
}
AnimatedVisibility(
visible = isSearchEnabled,
enter = fadeIn(
animationSpec = tween(durationMillis = 300)
) slideInHorizontally(
initialOffsetX = { it / 2 },
animationSpec = tween(durationMillis = 700)
),
exit = fadeOut(
animationSpec = tween(300, easing = FastOutLinearInEasing)
) shrinkHorizontally(
shrinkTowards = Alignment.End,
animationSpec = tween(durationMillis = 700, easing = FastOutLinearInEasing)
)
) {
TextField(
modifier = Modifier.padding(end = 16.dp),
shape = RoundedCornerShape(10.dp),
value = text,
onValueChange = { text = it; onValueChange(it) })
}
uj5u.com熱心網友回復：
這將擴大和縮小搜索欄，
@ExperimentalAnimationApi
@Composable
fun ExpandableSearchbar() {
var text by remember {
mutableStateOf("")
}
var isSearchEnabled by remember {
mutableStateOf(false)
}
val slow = 700
val fast = 300
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.End,
modifier = Modifier
.fillMaxWidth()
.background(Color(0xFFE2E2E2))
.height(120.dp),
) {
IconButton(
onClick = {
isSearchEnabled = !isSearchEnabled
},
) {
Icon(Icons.Default.Search, "search")
}
AnimatedVisibility(
visible = isSearchEnabled,
enter = fadeIn(
animationSpec = tween(durationMillis = fast)
) expandHorizontally(
expandFrom = Alignment.End,
animationSpec = tween(
durationMillis = slow,
easing = FastOutLinearInEasing,
)
),
exit = fadeOut(
animationSpec = tween(
durationMillis = slow,
easing = FastOutLinearInEasing,
)
) shrinkHorizontally(
shrinkTowards = Alignment.End,
animationSpec = tween(
durationMillis = slow,
easing = FastOutLinearInEasing,
)
)
) {
TextField(
modifier = Modifier.padding(end = 16.dp),
shape = RoundedCornerShape(10.dp),
value = text,
onValueChange = {
text = it
},
)
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/371282.html