Анимация цвета. animateColorAsState

Функция animateColorAsState() анимирует значение типа Color, то есть цвет. Она имеет следующие параметры:

@Composable
public fun animateColorAsState(
    targetValue: Color,
    animationSpec: AnimationSpec<Color> = colorDefaultSpring,
    label: String = "ColorAnimation",
    finishedListener: ((Color) -> Unit)? = null
): State<Color>

• targetColor: целевой цвет, к которому надо выполнить переход

• animationSpec: применяемая анимация в виде объекта AnimationSpec

• label: название анимации

• finishedListener: функция, которая выполняется при завершении анимации

Рассмотрим следующий пример:

package com.example.helloapp

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.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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 {
            var colorState by remember { mutableStateOf(Color.DarkGray) }
            val animatedColor: Color by animateColorAsState(
                targetValue = colorState,
                animationSpec = tween(5000)
            )

            Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                Box(Modifier.padding(20.dp).size(200.dp).background(animatedColor))
                Button(
                    {colorState = if (colorState == Color.Red) {Color.DarkGray} else {Color.Red}},
                    Modifier.padding(10.dp)) {
                    Text("Изменить цвет", fontSize = 22.sp)
                }
            }
        }
    }
}

Здесь происходит анимация цвета компонента Box от красного к темно-серому и наборот.

Для этого вначале определяем состояние, которое будет хранить текущий цвет:

var colorState by remember { mutableStateOf(Color.DarkGray) }

По умолчанию это темно-сервый цвет. Далее определяем саму анимацию цвета:

val animatedColor: Color by animateColorAsState(
    targetValue = colorState,
    animationSpec = tween(5000)
)

Параметр targetValue указывает на значение, к которому надо перейти. И здесь мы просто передаем значение colorState, то есть текущий цвет. Когда произойдет нажатие на кнопку, и изменится значение colorState, то targetValue получит новое значение. И функция выполнит переход к новому целевому цвету.

С помощью параметра animationSpec определяем настройки анимации. В данном случае с помощью функции tween() задаем время выполнения анимации - 5000 миллисекунд. То есть переход от одного цвета к другому будет выполняться 5 секунд.

Функция animateColorAsState() возвращает объект типа State<Color>, а с помощью оператора by получаем из него сам объект Color. Для демонстрации определен компонент Box, фон которого привязан к цвету, полученному из функции animateColorAsState

Box(Modifier.padding(20.dp).size(200.dp).background(animatedColor))

А с помощью кнопки переключаем цвет в colorState:

Button(
    {colorState = if (colorState == Color.Red) {Color.DarkGray} else {Color.Red}},
    Modifier.padding(10.dp)) {
    Text("Изменить цвет", fontSize = 22.sp)
}

В примере выше специафикация анимации устанавливалась с помощью функции tween(), но также можно использовать и другие функции, которые возвращают объект AnimationSpec. Например, применим функцию keyframes() для анимации по ключевым кадрам:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.keyframes
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.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
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.Alignment


class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var colorState by remember { mutableStateOf(Color.DarkGray) }
            val animatedColor: Color by animateColorAsState(
                targetValue = colorState,
                animationSpec = keyframes {
                    durationMillis = 3000
                    Color.Blue at 500
                    Color.Green at 1500
                    Color.Yellow at 2500
                }
            )

            Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                Box(Modifier.padding(20.dp).size(200.dp).background(animatedColor))
                Button(
                    {colorState = if (colorState == Color.Red) {Color.DarkGray} else {Color.Red}},
                    Modifier.padding(10.dp)) {
                    Text("Изменить цвет", fontSize = 22.sp)
                }
            }
        }
    }
}

В данном случае цвет компонента Box опять же изменяется с темно-серого на красный, однако в течение всего времени анимации (3 секунды) он также получает промежуточные цвета, которые описываются ключевыми кадрами анимации:

animationSpec = keyframes {
    durationMillis = 3000
    Color.Blue at 500
    Color.Green at 1500
    Color.Yellow at 2500
}

Таким образом, через 500 миллисекунд после начала анимации компонент Box получит цвет Color.Blue, через 1500 миллисекунд - Color.Green, и через 2500 миллисекунд после начала анимации - цвет Color.Yellow.