泡杯咖啡 ☕，让我们看看如何使用 Jetpack Compose 创建一个动态边框。

首先，我们需要创建一个名为 AnimatedBorderCard 的新组合函数。这个函数将包裹其他组合内容，因此我们需要传入 content 参数和一个 onClick 参数。

@Composable
fun AnimatedBorderCard(
    onClick: () -> Unit,
    content: @Composable () -> Unit
) { }

我们希望动画是无限循环的，所以让我们使用 rememberInfiniteTransition 来实现。

val infiniteColorTransition = rememberInfiniteTransition(label = "Color animation")

现在，为了让颜色在卡片上移动，我们需要对其进行旋转动画。

val degrees by infiniteColorTransition.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 10000, easing = LinearEasing),
        repeatMode = RepeatMode.Restart
    ),
    label = "Color rotation"
)

我们所需做的就是创建一个带有颜色边框的卡片，并显示卡片内容。

Surface(
    modifier = Modifier.clickable(onClick = onClick),
    shape = CircleShape
) {
    Surface(
        modifier = Modifier
            .padding(2.dp) // 边框宽度
            .drawWithContent {
                rotate(degrees) {
                    drawCircle(
                        brush = Brush.linearGradient(listOf(Color.Magenta, Color.Red)),
                        radius = size.width,
                        blendMode = BlendMode.SrcIn
                    )
                }

                drawContent()
            },
        shape = CircleShape
    ) {
        content()
    }
}

要获