GPU 合成层

概念定义

最终像素来自多个预光栅化表面的合成。若动画只改变表面位置或不透明度，合成器可独立产出新帧：无样式重算、无布局、无绘制、不占主线程。这正是主线程繁忙时仍能 60fps 平滑动画的机制。

工作机制

若干条件触发层提升：3D 变换、will-change 提示、video、canvas、合成动画。引擎按分辨率光栅化每层、上传纹理、逐帧合成。层膨胀表现为瓦片内存、上传带宽与弱 GPU 上变慢的光栅化。

使用场景

把轮播、抽屉、指示器、视差动画迁移到 transform 与 opacity；克制地提示提升并在动画结束后移除。用 Layers 面板对比改动前后的表面数与内存。

常见误区

提升 width、color 等属性的动画照旧重绘，提升帮不上忙。will-change 并不免费：每个提升层都消耗 GPU 内存与光栅化，全局撒用适得其反；包含巨型图片的元素被提升会生成超大纹理拖慢光栅。文本光栅缩放差异还可能改变渲染观感。

代码示例

public class StringBuilderManipulation {

    public static void main(String[] args) {
        StringBuilder sb = new StringBuilder(64);

        sb.append("Hello");
        sb.append(" ");
        sb.append("World");
        System.out.println("Built: " + sb);

        sb.insert(5, " Java");
        System.out.println("After insert: " + sb);

        sb.delete(5, 10);
        System.out.println("After delete: " + sb);

        sb.replace(0, 5, "Hi");
        System.out.println("After replace: " + sb);

        sb.reverse();
        System.out.println("Reversed: " + sb);

        String csv = String.join(", ",
            "Apple", "Banana", "Cherry", "Date");
        System.out.println("CSV: " + csv);

        String formatted = String.format(
            "Name: %s, Age: %d, Score: %.2f",
            "Alice", 30, 95.5
        );
        System.out.println(formatted);

        String stripped = "  padded  ".strip();
        System.out.println("Stripped: '" + stripped + "'");
    }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}