如何实现点击图标展开居中后2秒消失的过渡动画？

核心思路 #

要解决动画挤压其他组件的问题，关键是让动画元素脱离正常布局流，不占用布局空间。可以通过层级叠加（如Box顶层、FrameLayout顶层）承载动画图标，配合位移、缩放动画实现效果，最后通过延迟任务自动隐藏图标。

Jetpack Compose 实现示例 #

@Composable
fun CenterExpandAnimatedIcon() {
    var isAnimating by remember { mutableStateOf(false) }
    var iconRawPosition by remember { mutableStateOf(Offset.Zero) }
    val screenSize = LocalConfiguration.current.run {
        screenWidthDp.dp to screenHeightDp.dp
    }
    // 计算屏幕中心位置（减去图标半宽/高，让图标中心对齐屏幕中心）
    val centerOffset = Offset(
        x = (screenSize.first / 2) - 24.dp,
        y = (screenSize.second / 2) - 24.dp
    )

    // 位移动画：从原始位置到屏幕中心
    val animatedOffset by animateOffsetAsState(
        targetValue = if (isAnimating) centerOffset else iconRawPosition,
        animationSpec = tween(500)
    )
    // 缩放动画：从原始尺寸放大到3倍（可自定义倍数）
    val animatedScale by animateFloatAsState(
        targetValue = if (isAnimating) 3f else 1f,
        animationSpec = tween(500)
    )

    Box(modifier = Modifier.fillMaxSize()) {
        // 原始图标（正常布局中的位置，示例为右下角）
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "触发动画的图标",
            modifier = Modifier
                .size(48.dp)
                .align(Alignment.BottomEnd)
                .padding(16.dp)
                .pointerInput(Unit) {
                    detectTapGestures(onTap = { offset ->
                        iconRawPosition = offset
                        isAnimating = true
                    })
                }
        )

        // 动画图标（脱离布局流，悬浮在顶层）
        if (isAnimating) {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "动画中的图标",
                modifier = Modifier
                    .offset(x = animatedOffset.x, y = animatedOffset.y)
                    .scale(animatedScale)
                    .size(48.dp)
            )
        }
    }

    // 动画启动后延迟2秒结束
    LaunchedEffect(isAnimating) {
        if (isAnimating) {
            delay(2000)
            isAnimating = false
        }
    }
}

关键说明 #

• 避免布局挤压：动画图标放在Box顶层，用offset控制位置，不参与正常布局计算，不会影响其他组件位置。
• 动画同步：位移和缩放动画通过animateOffsetAsState、animateFloatAsState实现同步执行，保证过渡流畅。
• View系统替代方案：如果用传统View开发，可将动画图标放在FrameLayout顶层，通过ViewPropertyAnimator执行translationX/translationY（位移）、scaleX/scaleY（缩放）动画，再延迟2秒调用setVisibility(View.GONE)隐藏。

内容的提问来源于stack exchange，提问作者Akinchan D Roger