Работа с анимациями в Android Jetpack Compose
Здравствуйте! В сегодняшней статье мы поговорим о создании анимаций в Jetpack Compose. Вы узнаете, как добавить плавные визуальные эффекты в интерфейс Android-приложения, какие API предоставляет Compose и как управлять переходами состояний.
Что такое анимации в Jetpack Compose?
Анимации — это способ сделать интерфейс более живым и отзывчивым. С помощью анимаций можно визуально подчеркнуть изменение состояния, привлечь внимание пользователя или просто сделать взаимодействие с приложением более приятным.
Шаг 1: Простые анимации с animate*AsState
Самый простой способ реализовать анимацию в Compose — использовать функции вида animateFloatAsState, animateDpAsState и т.п.
@Composable
fun SimpleAnimation() {
var expanded by remember { mutableStateOf(false) }
val size by animateDpAsState(targetValue = if (expanded) 200.dp else 100.dp, label = "")
Box(
modifier = Modifier
.size(size)
.background(Color.Cyan)
.clickable { expanded = !expanded }
)
}
При клике размер блока плавно меняется — просто и удобно!
Шаг 2: Анимация нескольких параметров с updateTransition
Если нужно анимировать сразу несколько свойств, используйте updateTransition. Это позволяет группировать анимации и синхронизировать их.
@Composable
fun MultiAnimation() {
var selected by remember { mutableStateOf(false) }
val transition = updateTransition(targetState = selected, label = "")
val color by transition.animateColor(label = "") { if (it) Color.Red else Color.Gray }
val corner by transition.animateDp(label = "") { if (it) 30.dp else 0.dp }
Box(
modifier = Modifier
.size(120.dp)
.background(color, shape = RoundedCornerShape(corner))
.clickable { selected = !selected }
)
}
Такой подход отлично подходит для визуального переключения состояний компонентов.
Шаг 3: Анимации появления и исчезновения
Для анимации видимости компонентов используйте AnimatedVisibility.
@Composable
fun VisibilityAnimation() {
var visible by remember { mutableStateOf(true) }
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = { visible = !visible }) {
Text("Показать / Скрыть")
}
AnimatedVisibility(visible = visible) {
Text("Я появляюсь с анимацией!")
}
}
}
Эффект может быть дополнен анимацией масштабирования, альфы и т.д.
Шаг 4: Неограниченные возможности с Animatable
Если нужно больше контроля — используйте Animatable и launch в корутине.
@Composable
fun ManualAnimation() {
val offsetX = remember { Animatable(0f) }
LaunchedEffect(Unit) {
offsetX.animateTo(
targetValue = 300f,
animationSpec = tween(durationMillis = 1000)
)
}
Box(
modifier = Modifier
.offset { IntOffset(offsetX.value.toInt(), 0) }
.size(60.dp)
.background(Color.Green)
)
}
Этот способ хорош для кастомных и последовательных анимаций.
Заключение
Jetpack Compose предлагает широкий спектр инструментов для работы с анимациями — от простых до продвинутых. Используйте их, чтобы сделать интерфейс вашего приложения более живым, интуитивным и приятным для пользователя.
Хотите углубиться в Compose и построение UI? Тогда рекомендуем видеокурс Создание приложений для Android с нуля.
