Back
Featured image of post Random Animating Pie Button

Random Animating Pie Button

I am exploring animations with small sampler functions using Jetpack Compose. This one is a custom component that draws a little pie chart. It will animate a random pie value on the click of the button.

click and animate
click and animate

data class PieData(
    val foreground: Color = Color.White,
    val strokeWidth: Dp = 4.dp,
    val percentage: Float
)

@Composable
fun PieStatus(
    modifier: Modifier = Modifier,
    pieData: PieData
) {
    var animationPlayed by remember { mutableStateOf(false) }
    val currentPercentage = animateFloatAsState(
        targetValue = if (animationPlayed) pieData.percentage else 0f,
        animationSpec = tween(1000)
    )
    LaunchedEffect(key1 = true) {
        animationPlayed = true
    }
    Canvas(
        modifier = modifier
    ) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawCircle(
            color = pieData.foreground,
            center = Offset(x = canvasWidth / 2, y = canvasHeight / 2),
            radius = canvasWidth / 2 - pieData.strokeWidth.toPx(),
            style = Stroke(width = pieData.strokeWidth.toPx())
        )
        val arcPadding = pieData.strokeWidth.toPx() * 2
        drawArc(
            color = pieData.foreground,
            startAngle = -90f,
            sweepAngle = currentPercentage.value * 360,
            useCenter = true,
            topLeft = Offset(arcPadding, arcPadding),
            size = Size(size.width - (arcPadding * 2f), size.height - (arcPadding * 2f))
        )
    }
}

code