在扩展动画旁边滑动一个项目

Question

我有以下动画：

问题是：

当动画开始时，搜索图标（放大镜）立即滑到屏幕左侧。
当搜索栏向后折叠时，图标移动流畅，接近结束时加速。

我这里想实现的是让这个图标滑动的更流畅，体验更好

有什么办法可以实现吗？

负责动画的代码：

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) })
}

Answer 1

这将扩大和缩小搜索栏，

@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
                },
            )
        }
    }
}

在扩展动画旁边滑动一个项目

Sliding an item next to the expanding animation

animation

android

android-jetpack-compose

jetpack-compose-animation