Перемещение элемента рядом с расширяющейся анимацией

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