Chip Selector - Animated Background

chip_selector_animated_background.kt

@Composable
fun Chip(
    label: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    // omitted for brevity
    val transition = updateTransition(targetState = isSelected, label = "transition")
    val pathFraction by transition.animateFloat(
        transitionSpec = { tween(durationMillis = AnimationDurationMillis) },
        label = "pathSegment"
    ) { selected ->
        if (selected) 1f else 0f
    }
    // 1
    val backgroundColor by transition.animateColor(
        transitionSpec = { tween(durationMillis = AnimationDurationMillis) },
        label = "backgroundColor"
    ) { selected ->
        if (selected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.secondaryContainer
    }
    Box(
        modifier = modifier
            .drawWithCache {
                // path calculation omitted for brevity
                onDrawBehind {
                    drawPath(
                        path = path,
                        color = backgroundColor,
                        style = Fill,
                    )
                    drawPath(
                        path = pathSegment,
                        color = borderColor,
                        style = Stroke(width = borderWidth),
                    )
                }
            }
            .clickable(interactionSource = interactionSource, indication = null, onClick = onClick)
    ) {
        Text(
            text = label,
            color = textColor,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .padding(horizontal = 24.dp, vertical = 16.dp)
        )
    }
}