黑龙江省网站建设_网站建设公司_Java_seo优化

今天我们要做的，是一个**“烦恼碎纸机” **。

它的玩法很简单：你在屏幕上的便签里写下今天的烦恼（比如“改不完的 Bug”或者“不懂产品的 PM”），然后点击红色的“销毁”按钮。伴随着手机的震动和嗡嗡声，这张便签会被卷入底部的机器，瞬间化作无数碎片飘落。

1. 功能拆解

在写代码之前，我们先来拆解一下这个动画的原理。就像变魔术一样，很多酷炫的效果其实都是“视觉欺骗”。

我们要实现的“吞纸”效果，其实是由三层 UI 叠加而成的：

[ Layer 3: 碎纸机机身 ] <-- 最上层 (zIndex = 2) (这里有一个黑色的矩形入口，用来遮挡) -------------------------------- [ Layer 2: 纸张 (Paper) ] <-- 中间层 (zIndex = 1) (随着动画向下移动，穿过 Layer 3) -------------------------------- [ Layer 1: 背景 (Background) ] <-- 最底层 (zIndex = 0)

关键点在于zIndex。我们将碎纸机的机身盖在纸张上面。当纸张向下移动时，它实际上是滑到了机身图层的下方。但在用户看来，纸张就像是被卷进了机器肚子里。

至于那些飘落的碎纸屑，其实是在机身下方用Canvas绘制出来的粒子动画。

2.布局实现

首先，我们用 Compose 的Box布局来搭建这个布局。

@Composable fun ShredderScreen() { // 纸张的垂直偏移量，我们将通过改变它来驱动动画 val paperOffsetY = remember { Animatable(0f) } Box( modifier = Modifier .fillMaxSize() .background(Color(0xFF222222)) // 暗黑背景，更有沉浸感 ) { // 1. 纸张 (Paper) // 我们给它一个 zIndex = 1f PaperInput( offsetY = paperOffsetY.value, modifier = Modifi