Плавная анимация в Jetpack Compose — простое решение с animateDpAsState

Благодаря Jetpack Compose логика анимации легко встраивается в декларацию пользовательского интерфейса.

Всего несколько строк кода — и вы можете создавать плавные, адаптивные переходы, которые придадут вашему приложению премиальный и продуманный вид.

Экспериментируем с animateDpAsState — одним из удобных API Compose, который делает переходы пользовательского интерфейса невероятно плавными.

Цель была проста: анимировать вертикальное смещение кнопки в зависимости от положения нижнего экрана.

Сниппет:

val targetY by animateDpAsState(
    targetValue = when (sheetState.currentValue) {
        SheetValue.Hidden -> 0.dp
        else -> {
            val currentOffset = with(density) {
                try { sheetState.requireOffset().toDp() }
                catch (_: Exception) { 0.dp }
            }

            (usableHeight - currentOffset)
                .coerceAtLeast(0.dp)
                .coerceAtMost(maxLift)
        }
    },
    label = "gps_button_animation"
)

Box(
    modifier = Modifier
        .offset(y = -targetY) // Negative offset moves the button up
) {
    // Button content here
}

Платформа: Android