Skip to content

Instantly share code, notes, and snippets.

@virendersran01
Forked from stevdza-san/AnimatedBorderCard.kt
Created September 25, 2023 17:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save virendersran01/cdc8f327c437c035a27008de103dd4eb to your computer and use it in GitHub Desktop.
Save virendersran01/cdc8f327c437c035a27008de103dd4eb to your computer and use it in GitHub Desktop.
Card with Animated Border built with Jetpack Compose.
@Composable
fun AnimatedBorderCard(
modifier: Modifier = Modifier,
shape: Shape = RoundedCornerShape(size = 0.dp),
borderWidth: Dp = 2.dp,
gradient: Brush = Brush.sweepGradient(listOf(Color.Gray, Color.White)),
animationDuration: Int = 10000,
onCardClick: () -> Unit = {},
content: @Composable () -> Unit
) {
val infiniteTransition = rememberInfiniteTransition(label = "Infinite Color Animation")
val degrees by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 360f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = animationDuration, easing = LinearEasing),
repeatMode = RepeatMode.Restart
),
label = "Infinite Colors"
)
Surface(
modifier = modifier.clickable { onCardClick() },
shape = shape
) {
Surface(
modifier = Modifier
.fillMaxWidth()
.padding(borderWidth)
.drawWithContent {
rotate(degrees = degrees) {
drawCircle(
brush = gradient,
radius = size.width,
blendMode = BlendMode.SrcIn,
)
}
drawContent()
},
color = MaterialTheme.colorScheme.surface,
shape = shape
) {
content()
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment