热力图 + 苹果 Liquid Glass 效果 的 iOS 26 SwiftUI

时间: 2025-08-31 03:17:54

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

你想要一个 热力图 + 苹果 Liquid Glass 效果 的 iOS 26 SwiftUI 实现。可以分为两部分：

1. 热力图绘制

可以用 Canvas 或 Metal，这里用 Canvas + CoreGraphics 来生成渐变的热力图背景：

import SwiftUI

@available(iOS 26.0, *)
struct HeatmapView: View {
    let points: [CGPoint]
    let size: CGSize

    var body: some View {
        Canvas { context, _ in
            for point in points {
                let rect = CGRect(x: point.x - 50, y: point.y - 50, width: 100, height: 100)
                let gradient = Gradient(colors: [.red.opacity(0.6), .orange.opacity(0.4), .clear])
                context.fill(Path(ellipseIn: rect),
                             with: .radialGradient(gradient,
                             center: point, startRadius: 0, endRadius: 50))
            }
        }
        .frame(width: size.width, height: size.height)
    }
}

2. Liquid Glass 效果 + 容器

@available(iOS 26.0, *)
struct AppleInviteView: View {
    @Namespace private var namespace
    @State private var isExpanded = false

    let points = [
        CGPoint(x: 100, y: 150),
        CGPoint(x: 180, y: 200),
        CGPoint(x: 260, y: 300)
    ]

    var body: some View {
        ZStack {
            // 背景热力图
            HeatmapView(points: points, size: CGSize(width: 400, height: 600))

            VStack {
                GlassEffectContainer(spacing: 40) {
                    HStack(spacing: 40) {
                        Image(systemName: "applelogo")
                            .font(.system(size: 80))
                            .glassEffect(.regular.tint(.blue).interactive())
                            .glassEffectID("apple", in: namespace)

                        if isExpanded {
                            Text("WWDC 2025")
                                .font(.largeTitle.bold())
                                .glassEffect(.regular.tint(.purple).interactive())
                                .glassEffectID("invite", in: namespace)
                        }
                    }
                }

                Button("Toggle") {
                    withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
                        isExpanded.toggle()
                    }
                }
                .buttonStyle(.glass)
                .padding(.top, 40)
            }
        }
        .background(Color.black.ignoresSafeArea())
    }
}

3. 效果说明

• 背景使用 HeatmapView 渲染热点区域。

• GlassEffectContainer + .glassEffectID 使 Logo 与文字在展开/收缩时发生 流体融合。

• 按钮使用 .buttonStyle(.glass) 保持一致的玻璃交互感。

要不要我帮你 加上动态热力图（点会移动，颜色会逐渐变化），像苹果发布会邀请函那样有流动感？
还是要做 完全静态的海报？

还有问题,向AI提问。