Функция AnimatedContent

Функция AnimatedContent следит за targetState и при смене значения анимирует выход старого содержимого и вход нового. Лямбда content получает текущее состояние и рисует UI для него. Переходы настраивают через transitionSpec, часто с tween или spring.

Синтаксис

AnimatedContent(targetState = page) { state ->
	Text(state)
}

Параметры

Параметр	Описание
`targetState`	Ключ состояния, при смене которого запускается анимация.
`transitionSpec`	Как связать enter и exit при смене targetState.
`content`	UI для каждого значения targetState.
`label`	Метка перехода для отладки.

Пример

Давайте переключим две подписи с crossfade:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
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 text by remember { mutableStateOf("abcde") }
			Column {
				Button(onClick = {
					text = if (text == "abcde") "12345" else "abcde"
				}) {
					Text("abcde")
				}
				AnimatedContent(
					targetState = text,
					transitionSpec = {
						fadeIn() togetherWith fadeOut()
					},
					label = "12345",
				) { line ->
					Text(line)
				}
			}
		}
	}
}

На экране при нажатии кнопки подпись "abcde" и "12345" сменяют друг друга с плавным переходом.

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

функция AnimatedVisibility,
которая показывает и скрывает один блок
функция tween,
которую вставляют в transitionSpec
перечисление EnterExitState,
с фазами входа и выхода перехода
функция animateColorAsState,
для анимации одного свойства без смены composable