Вращение изображения кнопки при нажатии на нее

Рейтинг: 2Ответов: 1Опубликовано: 04.06.2023

Как сделать вращение иконки на 360° при нажатии на кнопку.
В интернете нашёл только бесконечное вращение при запуске программы.

    val infiniteTransition = rememberInfiniteTransition()
    val angle by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            tween(1000, easing = LinearEasing)
        )
    )
        IconButton(
            onClick = {

            },
            modifier = Modifier.padding(top = 5.dp)
        ) {
            Icon(
                imageVector = Icons.Default.Refresh,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier
                    .rotate(angle)
            )
        }
kotlin анимация compose-desktop
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вместо бесконечной анимации используйте Animatable.

При создании объекта Animatable задается начальное значение. Далее, анимация запускается с помощью функции animateTo. Вернуть в начальное положение без анимации можно с помощью функции snapTo.

Так как animateTo и snapTo являются suspend-функциями, то их необходимо запускать внутри скоупа корутины:

private val animationSpec: AnimationSpec<Float> =
    tween(durationMillis = 2000, easing = EaseOutElastic)

@Composable
fun RotatingButton() {
    val scope = rememberCoroutineScope()
    val angle = remember { Animatable(initialValue = 0f) }
    IconButton(
        onClick = {
            scope.launch {
                angle.snapTo(targetValue = 0f)
                angle.animateTo(targetValue = 360f, animationSpec)
            }
        },
    ) {
        Icon(
            modifier = Modifier.rotate(angle.value),
            imageVector = Icons.Default.Refresh,
            contentDescription = null,
        )
    }
}