如何在SwiftUI Canvas中为单个粒子应用3D变换？

问题描述 #

我正尝试使用SwiftUI Canvas复刻iMessage中的彩色纸屑效果，想了解如何为单个粒子应用3D变换。我曾尝试通过projectionTransform添加CATransform3D，但该操作会旋转整个画布，而非目标粒子，无法达到预期效果。目前我使用基础的ForEach(particles.indices, id: \.self)循环创建每个粒子，并通过.rotation3DEffect应用变换，但担心存在性能问题，因此尝试使用.drawingGroup()。请问是否有在Canvas中为单个粒子应用3D变换的可行方案？

现有代码（ForEach循环实现） #

GeometryReader { proxy in
    let size = proxy.size

    TimelineView(.animation) { timeline in
        let _: () = {
            let now = timeline.date.timeIntervalSinceReferenceDate
            model.update(at: now)
        }()

        ZStack {
            ForEach(model.particles.indices, id: \.self) { index in
                let particle = model.particles[index]
                particle.shape
                    .fill(particle.color)
                    .rotation3DEffect(.degrees(particle.degrees), axis: (x: particle.x, y: particle.y, z: particle.z))
                    .frame(width: particle.frame.width, height: particle.frame.height)
                    .position(particle.frame.origin)
                    .tag(index)
            }
        }
        .frame(width: size.width, height: size.height)
        .drawingGroup()
    }
    .contentShape(Rectangle())
    .gesture(
        DragGesture(minimumDistance: 0)
            .onEnded { _ in model.loadEffect(in: size) }
    )
    .task { model.loadEffect(in: size) }
}

可行方案 #

1. 优化现有ForEach + rotation3DEffect方案 #

你当前的实现本身是可行的，.drawingGroup()已经能将所有粒子的渲染合并为单个Metal层，大幅提升性能。如果仍担心性能，可补充以下优化：

• 替换ForEach(indices)为ForEach(particles, id: \.id)：给Particle模型添加唯一ID属性（如var id: UUID = UUID()），让SwiftUI更高效地追踪粒子状态变化，减少不必要重绘。
• 提前缓存粒子形状：将shape预先生成并缓存，避免每次渲染都重新创建Shape实例。
• 控制粒子数量：限制在100-200个以内，iMessage的纸屑效果粒子数量本身也不会过多，过多粒子必然带来性能压力。

2. 使用SwiftUI Canvas API直接绘制（推荐） #

若想完全基于Canvas实现单个粒子的3D变换，可利用GraphicsContext的状态隔离和3D变换能力，为每个粒子单独应用变换：

GeometryReader { proxy in
    let size = proxy.size

    TimelineView(.animation) { timeline in
        let _: () = {
            let now = timeline.date.timeIntervalSinceReferenceDate
            model.update(at: now)
        }()

        Canvas { context, size in
            for particle in model.particles {
                // 保存当前上下文状态，避免粒子间变换互相干扰
                context.saveState()
                
                // 平移到粒子中心位置
                context.translateBy(x: particle.frame.midX, y: particle.frame.midY)
                
                // 构建3D旋转变换矩阵
                var perspective = CATransform3DIdentity
                perspective.m34 = -1 / 500 // 调整该值控制透视强度，数值越小透视感越强
                let transform3D = CATransform3DRotate(perspective, particle.degrees * .pi / 180, particle.x, particle.y, particle.z)
                
                // 将3D矩阵转换为Canvas可用的变换
                context.transform = transform3D.toAffineTransform()
                
                // 以粒子中心为原点绘制形状
                let drawRect = CGRect(
                    origin: CGPoint(x: -particle.frame.width/2, y: -particle.frame.height/2),
                    size: particle.frame.size
                )
                context.fill(particle.shape.path(in: drawRect), with: .color(particle.color))
                
                // 恢复上下文状态
                context.restoreState()
            }
        }
        .frame(width: size.width, height: size.height)
    }
    .contentShape(Rectangle())
    .gesture(
        DragGesture(minimumDistance: 0)
            .onEnded { _ in model.loadEffect(in: size) }
    )
    .task { model.loadEffect(in: size) }
}

核心是通过saveState()和restoreState()隔离每个粒子的变换环境，使用CATransform3DRotate构建单个粒子的3D旋转矩阵，再转换为Canvas上下文支持的变换，实现粒子独立3D效果。

3. 方案性能对比 #

• ForEach + drawingGroup()：代码简洁，借助SwiftUI自动优化，适合粒子数量中等的场景。
• Canvas直接绘制：手动控制渲染流程，无需维护每个粒子的View状态，批量绘制性能更高，更适合粒子数量较多的场景。

注意事项 #

• 调整perspective.m34的值可控制3D透视强度，数值越负，透视效果越明显；数值越接近0，越接近平面效果。
• 绘制粒子时需以中心为原点，避免旋转后位置偏移。

内容的提问来源于stack exchange，提问作者LiYanan2004