Android Good Reads: “3 простых анимации на Jetpack Compose, которые сделают твою фичу на сл…”

3 простых анимации на Jetpack Compose, которые сделают твою фичу на следующем демо красивее

👉 Fade in - Fade out


@Composable
fun FadeAnimationDemo() {
    var isVisible by remember { mutableStateOf(true) }

Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            Text("Hello Jetpack Compose!", style = MaterialTheme.typography.h4)
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { isVisible = !isVisible }) {
            Text("Toggle Visibility")
        }
    }
}

👉 Scale


@Composable
fun ScaleAnimationDemo() {
    var isScaled by remember { mutableStateOf(false) }

    val scale by animateFloatAsState(
        targetValue = if (isScaled) 1.5f else 1f,
        animationSpec = tween(durationMillis = 500)
    )
    Box(
        modifier = Modifier
            .fillMaxSize()
            .clickable { isScaled = !isScaled },
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .graphicsLayer(scaleX = scale, scaleY = scale)
                .background(Color.Blue, shape = CircleShape)
        )
    }
}

👉 Crossfade можно глянуть внутри статьи. Не соглашусь, что это хороший вариант для анимирования перехода между экранами. Я бы использовал SharedTransition, но, видимо, сложность интеграции не в рамках 1 Composable функции выбило его из списка простых.

Чуть более содержательная дока по анимации: https://developer.android.com/develop/ui/compose/animation/quick-guide