Этот компонент также имеет еще одну версию:

@Composable
fun AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = fadeOut() + shrinkOut(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit

Единственное отличие от предыдущей версии состоит в том, что здесь для управления видимостью применяется параметр visibleState, который представляет значение типа MutableTransitionState

Итак, компонент AnimatedVisibility управляет видимостью вложенного содержимого. Рассмотрим простейший пример:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            val boxVisible = remember { mutableStateOf(true) }
            Column(Modifier.padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally) {

                AnimatedVisibility(visible = boxVisible.value, Modifier.padding(40.dp)) {
                    Box(Modifier.size(200.dp).background(Color.DarkGray))
                }
                Row(Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceEvenly) {
                    Button({boxVisible.value = true}, enabled = !boxVisible.value){ Text("Show", fontSize = 28.sp)}
                    Button({boxVisible.value = false}, enabled = boxVisible.value){ Text("Hide", fontSize = 28.sp)}
                }
            }
        }
    }
}

Здесь прежде всего для управления видимостью определяем состояние boxVisible:

val boxVisible = remember { mutableStateOf(true) }

AnimatedVisibility содержит компонент Box и соответственно управляет видимостью этого компонента. Для управления видимостью параметр visible привязан к состоянию boxVisible

AnimatedVisibility(visible = boxVisible.value, Modifier.padding(40.dp)) {
    Box(Modifier.size(200.dp).background(Color.DarkGray))
}

С помощью кнопок переключаем видимость компонента:

При этом появление и исчезновение комопнента Box будет происходить не многовенно, а плавно. И именно в это плавности и суть компонента, потому что само переключение видимости (мгновенное) мы могли бы сделать и без AnimatedVisibility, например, следующим образом:

val boxVisible = remember { mutableStateOf(true) }
Column(Modifier.padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceBetween) {
                
    if(boxVisible.value) {
        Box(Modifier.size(200.dp).padding(40.dp).background(Color.DarkGray))
    }
    Row(Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceEvenly) {
        Button({boxVisible.value = true}, enabled = !boxVisible.value){ Text("Show", fontSize = 28.sp)}
        Button({boxVisible.value = false}, enabled = boxVisible.value){ Text("Hide", fontSize = 28.sp)}
    }
}