Как сделать анимацию в Kotlin: простой пример для Android Compose

Если речь про Android, самый короткий путь сделать анимацию в Kotlin — использовать Jetpack Compose. Вы меняете состояние, а Compose плавно пересчитывает визуальное значение через animateFloatAsState

Например, сделаем кнопку, которая увеличивает карточку

@Composable
fun AnimatedCardExample() {
    var expanded by remember { mutableStateOf(false) }

    val scale by animateFloatAsState(
        targetValue = if (expanded) 1.2f else 1f,
        label = "card-scale"
    )

    Column {
        Box(
            modifier = Modifier
                .graphicsLayer {
                    scaleX = scale
                    scaleY = scale
                }
                .size(120.dp)
                .background(Color(0xFF6D5DF6), RoundedCornerShape(16.dp))
        )

        Button(onClick = { expanded = !expanded }) {
            Text("Анимировать")
        }
    }
}

Что здесь происходит

Переменная expanded хранит состояние: карточка обычная или увеличенная. Когда пользователь нажимает кнопку, состояние меняется. animateFloatAsState получает новый targetValue и не перескакивает мгновенно, а плавно двигает значение от старого к новому

graphicsLayer применяет масштаб к карточке. Поэтому меняется не сам размер layout-блока, а визуальное отображение. Для первой анимации это проще и безопаснее, чем перестраивать весь экран

Как проверить результат

Запустите экран в Android Studio Preview или на эмуляторе. Нажмите кнопку несколько раз. Карточка должна плавно увеличиваться и возвращаться обратно

Если карточка меняется резко, проверьте, что вы используете именно значение из animateFloatAsState, а не напрямую if (expanded) 1.2f else 1f

Если нужен другой тип анимации

Для цвета можно использовать animateColorAsState, для размера — animateDpAsState, для сложных переходов — updateTransition. Но новичку лучше начать с одного значения. Сначала поймите механику: состояние поменялось, анимация довела визуальный параметр до новой цели

Мини-задание для закрепления

Поменяйте пример так, чтобы карточка не только увеличивалась, но и становилась полупрозрачной. Для этого добавьте второе анимируемое значение:

val alpha by animateFloatAsState(
    targetValue = if (expanded) 0.6f else 1f,
    label = "card-alpha"
)

А затем добавьте alpha = alpha внутрь graphicsLayer. После этого при нажатии кнопки карточка должна одновременно менять масштаб и прозрачность. Если меняется только один параметр, проверьте, что оба значения зависят от одного и того же состояния expanded

Частые ошибки

Нет импортов

Android Studio обычно подсказывает импорты. Для примера понадобятся remember, mutableStateOf, animateFloatAsState, Modifier, graphicsLayer, size, background, Color, RoundedCornerShape, dp

Анимация не запускается

Проверьте, меняется ли состояние при клике. Если expanded всегда остается false, анимации нечего делать

Экран дергается

Если анимируете размер через Modifier.size, layout может пересчитываться заметнее. Для первого примера масштаб через graphicsLayer обычно выглядит спокойнее

Что почитать дальше по Kotlin

Если нужен общий маршрут по теме, откройте рубрику Kotlin. Для соседних задач пригодятся эти разборы:

• Как сделать тетрис в Android Studio на Kotlin
• Как сделать форму регистрации Android Kotlin
• Coroutines в Kotlin: первый async-пример
• Kotlin Android: первый экран без перегруза