Compose: Эффект раскрытия (reveal)

Создано 26 июня 2025

Создадим эфффект раскрытия (Reveal-анимация) на примере Box с изображением.

Для начала просто создадим заготовку - круглый Box и положим в него в Image. Добавим также круглую окантовку у Box.

@Composable
fun RevealAnimation(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .size(200.dp)
            .clip(CircleShape)
            .background(color = Color.Magenta)
            .border(
                width = 2.dp,
                color = Color.Cyan,
                shape = CircleShape
            )
    ) {
        Image(
            painter = painterResource(id = R.drawable.cat),
            contentDescription = "Cat image",
            modifier = modifier
                .size(150.dp)
                .align(alignment = Alignment.Center)
        )
    }
}

Подключаем анимацию. Добавляем новую переменную animateBorder и подключаем LaunchedEffect, чтобы анимация сработала при запуске три раза. Осталось поменять у Box параметр border с новым значением ширины width.

@Composable
fun RevealAnimation2(modifier: Modifier = Modifier) {
    val animateBorder = remember { Animatable(90f) }

    LaunchedEffect(animateBorder) {
        animateBorder.animateTo(
            targetValue = 2f,
            animationSpec = repeatable(
                animation = tween(
                    durationMillis = 2000,
                    easing = LinearEasing,
                    delayMillis = 500
                ),
                repeatMode = RepeatMode.Restart,
                iterations = 3
            )
        )
    }

    Box(
        modifier = modifier
            .size(200.dp)
            .clip(CircleShape)
            .background(color = Color.Magenta)
            .border(
                width = Dp(animateBorder.value),
                color = Color.Cyan,
                shape = CircleShape
            )
    ) {
        Image(
            painter = painterResource(id = R.drawable.cat1),
            contentDescription = "Cat image",
            modifier = modifier
                .size(150.dp)
                .align(alignment = Alignment.Center)
        )
    }
}

Запускаем и любуемся.

Реклама