Jetpack Compose 圆形到方形动画

Question

如何使用 jetpack compose 实现此动画？

Answer 1

@Preview
@Composable
fun BoxAnimation() {
    val infiniteTransition = rememberInfiniteTransition()
    val cornerPercent by infiniteTransition.animateValue(
        initialValue = 1,
        targetValue = 50,
        typeConverter = Int.VectorConverter,
        animationSpec = InfiniteRepeatableSpec(
            animation = keyframes {
                durationMillis = 3000
                0.at(0).with(FastOutSlowInEasing)
                0.at(1000).with(FastOutSlowInEasing)
                25.at(1500).with(FastOutSlowInEasing)
                50.at(2000).with(FastOutSlowInEasing)
                50.at(3000).with(FastOutSlowInEasing)
            },
            repeatMode = RepeatMode.Reverse
        )
    )
    val angle by infiniteTransition.animateValue(
        initialValue = 0f,
        targetValue = 90f,
        typeConverter = Float.VectorConverter,
        animationSpec = InfiniteRepeatableSpec(
            animation = keyframes {
                durationMillis = 3000
                0f.at(100).with(FastOutSlowInEasing)
                0f.at(1000).with(FastOutSlowInEasing)
                45f.at(1500).with(FastOutSlowInEasing)
                90f.at(2000).with(FastOutSlowInEasing)
                90f.at(3000).with(FastOutSlowInEasing)
            },
            repeatMode = RepeatMode.Reverse
        )
    )

    Box(
        modifier = Modifier
            .clipToBounds()
            .padding(50.dp)
            .rotate(angle)
            .clip(RoundedCornerShape(cornerPercent))
            .border(
                width = 10.dp,
                color = Color(0xFF2C6CAD),
                shape = RoundedCornerShape(cornerPercent)
            )
    ) {
        Box(
            modifier = Modifier
                .width(150.dp)
                .height(150.dp)
                .background(Color.Black)
        ) {}
    }
}