Анимация числовых значений и animateFloatAsState

Функция animateFloatAsState() применяется для анимации значений типа Float. Она имеет следующие параметры:

@Composable
public fun animateFloatAsState(
    targetValue: Float,
    animationSpec: AnimationSpec<Float> = defaultAnimation,
    visibilityThreshold: Float = 0.01f,
    label: String = "FloatAnimation",
    finishedListener: ((Float) -> Unit)? = null
): State<Float>

Здесь фактически те же самые параметры, что и в animateColorAsState() или animateDpAsState(), только вместо типа Color/Dp применяется тип Float. Например, параметр targetValue указывает на число, к которому надо выполнить переход. Так, возьмем следующий код:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.animateFloatAsState
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.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var rotated by remember { mutableStateOf(false) }
            val angle by animateFloatAsState(
                targetValue = if (rotated) 360f else 0f,
                animationSpec = tween(4000)
            )
            Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                Box(Modifier.padding(20.dp).size(200.dp).background(Color.LightGray).rotate(angle), Alignment.Center){
                    Box(Modifier.size(width=200.dp,height=20.dp).background(Color.DarkGray))
                }
                Button({rotated = !rotated},
                    Modifier.padding(10.dp)) {
                    Text(text = "Повернуть")
                }
            }
        }
    }
}

В данном случае суть приложения заключается в повороте компонента с помощью анимации Float:

Для поворота вначале определяем состояние:

var rotated by remember { mutableStateOf(false) }

Это значение указывает, в какую сторону вращать компонент. Далее на основе этого состояния определяем анимацию:

val angle by animateFloatAsState(
    targetValue = if (rotated) 360f else 0f,
    animationSpec = tween(4000)
)

Если rotated равно true, то целевое значение анимации устанавливается на 360 градусов, в противном случае оно устанавливается на 0. Если rotated равно true, то производится вращение на 360 градусов. Результат анимации получаем в переменную angle.

Затем передаем значение angle в модификатор rotate(), который принимает угол поворота:

Box(Modifier.padding(20.dp).size(200.dp).background(Color.LightGray).rotate(angle), Alignment.Center){
    Box(Modifier.size(width=200.dp,height=20.dp).background(Color.DarkGray))
}

И для запуска анимации определяем кнопку, по нажатию на которую переключается значение rotated, что, в свою очередь, приведет к изменению угла вращения и анимации:

Button({rotated = !rotated},