Compose实现‘New’标签平滑转圆形通知徽章方案咨询

你的代码问题在于直接修改showText和padding时没有添加动画过渡，导致状态切换是瞬间完成的，所以看起来不流畅。下面是更优的实现方式，使用Compose内置的动画API来实现平滑过渡：

核心优化点 #

• 用animateDpAsState处理内边距的平滑变化
• 用animateContentSize让容器尺寸随内容/内边距变化时平滑过渡
• 用animateFloatAsState控制文本的透明度，实现渐隐效果
• 圆形背景的绘制配合尺寸动画，自然收缩成小圆点

完整代码实现 #

@Composable
internal fun AnimatedNewLabel() {
    // 控制是否处于"New"文本状态，true显示文本，false显示圆形徽章
    var isTextVisible by remember { mutableStateOf(true) }
    
    // 动画化内边距：文本状态下用原有padding，徽章状态下归零
    val padding by animateDpAsState(
        targetValue = if (isTextVisible) 8.dp else 0.dp,
        animationSpec = tween(durationMillis = 300, easing = LinearOutSlowInEasing)
    )
    
    // 文本透明度动画：文本状态下不透明，徽章状态下完全透明
    val textAlpha by animateFloatAsState(
        targetValue = if (isTextVisible) 1f else 0f,
        animationSpec = tween(durationMillis = 200)
    )

    Box(
        modifier = Modifier
            // 让容器尺寸随内容/padding变化时平滑过渡
            .animateContentSize(animationSpec = tween(durationMillis = 300))
            .padding(padding)
            .drawBehind {
                // 绘制圆形背景，半径取当前尺寸的一半，自然收缩
                drawCircle(
                    color = Color.Red,
                    radius = size.minDimension / 2
                )
            },
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "New",
            textAlign = TextAlign.Center,
            maxLines = 1,
            fontSize = 14.sp,
            lineHeight = 20.sp,
            fontWeight = FontWeight.Normal,
            color = Color.White, // 加上白色文本更清晰
            alpha = textAlpha
        )
    }

    LaunchedEffect(Unit) {
        delay(4000)
        // 触发状态切换，启动所有动画
        isTextVisible = false
    }
}

关于AutoSizeText的疑问 #

不需要使用AutoSizeText，因为你的场景是文本从显示到完全消失，而非根据容器尺寸自适应调整文本大小。当前实现中通过透明度动画隐藏文本，配合容器尺寸动画收缩成圆形徽章，完全满足需求。

内容的提问来源于stack exchange，提问作者StuartDTO