Функция animateColorAsState

Функция animateColorAsState меняет Color к targetValue с выбранной кривой. Результат подходит для background и color у Text. Спецификацию задают animationSpec, например tween.

Синтаксис

val bg by animateColorAsState(targetValue = targetColor)

Параметры

Параметр	Описание
`targetValue`	Цвет, к которому стремится анимация.
`animationSpec`	Длительность и easing перехода между цветами.
`label`	Метка для отладки анимации.

Пример

Давайте переключим цвет фона Surface:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Surface
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
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var on by remember { mutableStateOf(false) }
			val bg by animateColorAsState(
				targetValue = if (on) Color.Red else Color.Green,
				animationSpec = tween(500),
				label = "abcde",
			)
			Surface(
				modifier = Modifier.fillMaxSize(),
				color = bg,
			) {
				Button(onClick = { on = !on }) {
					Text("12345")
				}
			}
		}
	}
}

На экране фон плавно меняется между двумя оттенками при нажатии кнопки.

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

функция animateFloatAsState,
которая анимирует число
класс Color,
значения которого передают в targetValue
функция spring,
которая задаёт упругий переход цвета
функция AnimatedContent,
которая анимирует смену содержимого