Функция AnimatedVisibility

Функция AnimatedVisibility рисует дочерние элементы только когда visible равен true, с анимацией входа и выхода. Переходы задают enter и exit, состояния связаны с EnterExitState. Флаг visible хранят в mutableStateOf.

Синтаксис

AnimatedVisibility(visible = visible) {
	Text("abcde")
}

Параметры

Параметр	Описание
`visible`	`true`, если блок должен быть на экране.
`enter`	Анимация появления, например `fadeIn`.
`exit`	Анимация исчезновения, например `fadeOut`.
`content`	Composable, который показывают и скрывают.

Пример

Давайте покажем текст с fade по кнопке:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var visible by remember { mutableStateOf(true) }
			Column {
				Button(onClick = { visible = !visible }) {
					Text("abcde")
				}
				AnimatedVisibility(
					visible = visible,
					enter = fadeIn(),
					exit = fadeOut(),
				) {
					Text("12345")
				}
			}
		}
	}
}

На экране строка "12345" плавно появляется и исчезает при нажатии кнопки "abcde".

Смотрите также

функция AnimatedContent,
которая анимирует смену одного содержимого на другое
перечисление EnterExitState,
которое описывает фазы входа и выхода
функция tween,
которую задают внутри enter и exit
функция animateFloatAsState,
для простой анимации одного числа без visibility