Compose图形新特性：网格渐变与多边形形状

在近期的一场技术分享中，来自 Android 团队的 Rebecca Franks、Ayush Chaudhry 和 Rahul Ray 系统展示了 Jetpack Compose 在图形渲染层面的最新进展。他们的核心判断是：那些获得高评分、让用户觉得"高级且原生"的应用，普遍善用系统级 API 的更新，在共享元素、模糊、多形态适配和性能之间取得平衡。

这场分享覆盖了从 Compose 高层 API 到底层渲染引擎的多层能力，也给出了性能调优的实操路径。

三层图形栈：从声明式 API 到原生画布

演讲者把 Android 图形能力划分为三层。最上层是 Compose API，承载 mesh gradient painter、多边形形状和渐进式模糊等新接口；中间层是 Compose 的 draw scope、draw modifier 节点和 AGSL，用于构建自定义效果；最底层是 Android 平台，Compose 始终可以访问原生 canvas，在 modifier 中直接使用最新的系统渲染原语。

这一分层意味着：高层 API 负责开箱即用，底层能力负责突破边界。旧版 View UI 工具包已进入维护模式，但团队仍在持续投入底层硬件渲染引擎，而这些引擎正是驱动 Compose 的基础。

AGSL（Android Graphics Shading Language）是 Android 13 引入的着色器语言，语法基于 Skia 的 SkSL，可在运行时编译执行片元着色器，用于实现动态渐变、滤镜、扭曲等自定义绘制效果。相比传统的 RenderScript 或 OpenGL ES 方案，AGSL 与 Android 渲染管线深度集成，可直接在 RenderNode 和 Compose 的 draw scope 中使用，无需管理 GL 上下文。在 Compose 中，AGSL 常通过 RuntimeShader 类暴露，配合 Brush 或 Paint 实现复杂视觉效果，是连接声明式 UI 与底层 GPU 能力的关键桥梁。

网格渐变：让多色融合更自然

Compose 1.12 引入了 MeshGradients。相比线性渐变和径向渐变，网格渐变适合环境背景、流体光效这类需要二维色彩过渡的场景——位置和颜色可以在空间中弯曲。

使用方式是先指定行列数，再在绘制 lambda 中为每个网格交点调用 setVertex，赋一个 0 到 1 的归一化偏移量和颜色；配合 animated offsets 即可让顶点动起来，最后通过 paint modifier 应用到任意 composable。

一个实用细节是开启双三次色彩插值（hasBicubicColor）。默认情况下颜色在三角形内线性插值，容易出现可见色块；开启后颜色可以无缝融合。演讲中展示了聊天应用的双击点赞效果，以及输入框背后的动态环境光晕——后者通过两组不同时长的无限动画让顶点运动显得有机，同时把外圈顶点固定为全透明，让光晕自然羽化。

顶点（vertex）是网格渐变的基本控制点，每个顶点携带位置偏移和颜色信息。网格由行和列划分出的四边形组成，每个四边形再拆分为两个三角形，渲染时在三角形内部对顶点属性进行插值。setVertex 的归一化偏移量（0 到 1）表示顶点相对于其所在网格单元的位置，而非整个画布坐标，因此调整行列数会改变渐变的精细程度。双三次插值（bicubic interpolation）是一种高阶插值方法，相比线性插值能保证颜色过渡的一阶导数连续，从而消除三角形边界处的色块和硬边，但计算开销略高。

DrawMesh：着色器驱动的任意几何效果

当预设渐变不够用，就需要下沉到 Raw Mesh API（Android 14 及以上）。网格由带顶点数据的三角形组成，顶点着色器计算每个角的位置和需要插值的值，光栅化器再为每个像素插值，最后由片元着色器算出颜色。

演讲用一条宽度不均、颜色沿路径变化的丝带效果做了演示。传统方案要么把路径拍平成大量短线逐段绘制（每段一次 draw call 和一个 paint 对象），要么用 runtime shader（只能拿到容器内的像素位置，无法直接表达路径信息）。DrawMesh 通过顶点着色器把"沿路径进度"和"位于描边哪一侧"作为属性传入，让片元着色器可以据此计算覆盖率与颜色。

Compose 侧通过 mesh specification 声明着色器、顶点属性布局和缓冲区，组合成 mesh 对象。由于 Compose Canvas 尚未暴露 DrawMesh，需要降到 Native Canvas 绘制。

顶点着色器（vertex shader）和片元着色器（fragment shader）是 GPU 渲染管线的两个可编程阶段。顶点着色器对每个顶点执行一次，负责计算顶点在屏幕上的最终位置以及需要传递给后续阶段的属性值；光栅化器将三角形离散为像素，并对顶点属性进行插值；片元着色器对每个像素执行一次，根据插值后的属性计算最终颜色。DrawMesh 的关键在于将路径进度、描边侧向等几何语义编码为顶点属性，使片元着色器能在像素级别还原任意几何效果，而不依赖预先生成的三角形网格。

广色域：不只是屏幕的事

Compose 1.12 开始支持广色域。屏幕上能复现的颜色范围因硬件而异，sRGB 是大多数屏幕的标准范围，新设备则能显示更饱和的色彩。但演讲者特别区分了两个概念：显示色域和渐变插值。

在标准 sRGB 屏幕上，屏幕本身无法物理渲染超出 sRGB 范围的颜色；但即使在这样的屏幕上，在更宽的或线性的色彩空间中插值色标，也会改变渐变的数学路径，避免中间发灰和生硬的色带。因此 Compose 1.12 带来的好处是：任何屏幕上都有更平滑的渐变混合，以及在支持的硬件上获得真正的广色域。

启用广色域需要在 manifest 或 composable 中以编程方式设置窗口色彩模式，否则窗口停留在 8 位 sRGB，GPU 渲染的广色域颜色会被裁剪。团队建议只在确实展示媒体、照片或丰富图形的页面启用，以节省电量和性能。Bitmap 方面应使用 hardware config 保留色彩信息，像 565 这类配置会损失精度并产生可见色带。

多边形形状与形变

Compose 1.13 原生支持 polygon shape，简化自定义形状和有机 UI 元素的构建。此前需要用多边形描述几何、产出 path，再手写 Shape wrapper，在 createOutline 里手动缩放和平移。新 API 作为专用 Shape builder 直接接收 density 和 size，可以动态计算顶点，圆角既可用 dp 也可用百分比指定，定义后直接传给任何接受 Shape 的 API。

同版本还引入 morph polygon shape，支持在不同多边形之间平滑过渡。示例是一个录音按钮在交互时从圆形变形为星形——只需提供起始形状、结束形状和进度值。关键在于读取进度发生在轮廓解析阶段而非组合阶段，因此逐帧形变只是解析出新的轮廓，不会触发重组。

模糊：从统一半径到渐进与背景

Compose 自 Android 12 起就有 blur modifier，适合统一半径的模糊。但现代设计更常见的是从清晰到模糊的平滑过渡，于是渐进式模糊成为 Compose 1.13 的正式 API：blur modifier 接受 blur radius spec，可用垂直、水平、径向渐变驱动，也能用自定义着色器——演讲中演示了一个动画对角正弦波片元着色器，把 0 到 1 的遮罩映射到最大模糊半径。示例里垂直渐变让照片上半部分保持 0dp 清晰，底部边缘升至 32dp；径向示例中中心为 0dp，向外到 300dp 处平滑升至 24dp。

这里要区分层模糊与背景模糊。层模糊作用于 composable 自身，标题和图标会一起变糊，背后的内容不受影响；背景模糊只采样顶栏后方滚动的内容，文字图标保持清晰。从 Android 37.2 起，可以通过 RenderNode.setBackdropRenderEffect 实现背景模糊——创建自定义 modifier 节点，配置 render node 效果，调用 drawIntoCanvas 与 drawRenderNode，再 drawContent 绘制未模糊内容。该能力还可链式组合，例如模糊加饱和度，做出磨砂玻璃、万花筒、放大镜等效果。演讲者提到内置的 backdrop blur modifier 正在开发中，并为 Compose 2 准备向后移植。

另一个新 API 是 SurfaceView.setBlurRegions。SurfaceView 在窗口上打洞，不在应用的 render node 树中，Compose 无法采样其缓冲区，因此此前难以局部模糊。该 API 允许应用声明模糊区域，传入相对 SurfaceView 的边界、模糊半径、alpha 和圆角半径列表。

运行时颜色滤镜与性能调优

Android 16 及以上引入 runtime color filter。以往图片只能设置静态矩阵颜色滤镜，现在可以传入着色器，接收输入像素颜色并产出新颜色，例如给照片套用赛博朋克风格。它可以转换为 Compose color filter 应用于任意 composable，而不限于图片。

效果堆叠之后，性能成为关键。演讲者用宏基准测试启动应用并滚动会话，统计错过截止时间的帧，初始得到 6 个延迟帧。追查发现：预取下一条消息时，图片在主线程解码且不让出，阻塞了新帧启动；消息滚入视野时渲染线程又要分配内存并上传像素，拖慢第二帧。

trace 中会记录大位图绘制到远小区域时的标记，给出完整位图尺寸和实际覆盖面积，除以屏幕密度即为 dp 值。据此定位到 painterResource 以全分辨率解码图片，替换为 Coil 的 async image 后，先测量容器再按需解码并在其他线程执行，主线程解码归零，延迟帧降至 2。

还有两类不易察觉的开销：runtime shader 应只创建一次，否则每次重建都会重新传入源码字符串，解析和构建在主线程耗时可达数百微秒，改为进程级创建或 remember 后仅更新 uniform，构建速度快了约 40 倍；逐帧动画的效果应包在 graphics layer 中，否则 Compose 会向上找到最近的 graphics layer 节点并整层重录，把 layer 直接放到动画盒子上可把重录范围收窄，主线程绘制耗时降低约 0.2 毫秒。

团队还提到可借助 trace 分析工具和 Compose performance skill 辅助排查。所有示例都可在 JetChat 应用中查看。

宏基准测试（macrobenchmark）是 Android 官方提供的性能测试工具，通过外部驱动应用完成启动、滚动、点击等用户行为，并采集帧时间戳，统计超出帧截止时间（通常为 16.6ms）的延迟帧数量。与微基准测试不同，宏基准测试关注端到端的真实交互体验，能暴露主线程阻塞、渲染线程资源竞争等问题。Trace 分析则通过 Perfetto 或 Android Studio Profiler 记录系统级事件，包括主线程解码、RenderThread 绘制、GPU 上传等，帮助定位具体耗时环节。文中提到的“大位图绘制到远小区域”标记，是 Compose 在检测到纹理尺寸与绘制区域比例失调时主动输出的诊断信息。