Canvas 粒子爆发

点画布任意位置 → 60 个粒子物理积分爆开 + 重力衰减 + 加色叠加 = 烟花。和 SwiftUI Canvas + TimelineView 同样的物理与混合模式。

ch. 7

调参

particles60gravity220px/s²

点画布任意位置触发 →

对照 SwiftUI

// SwiftUI 15+ — Canvas + TimelineView 粒子
TimelineView(.animation(minimumInterval: 1.0/60)) { ctx in
    Canvas(opaque: true,
           colorMode: .linear,
           rendersAsynchronously: true) { gc, size in
        gc.fill(Path(CGRect(origin: .zero, size: size)),
                with: .color(.black))
        let now = ctx.date.timeIntervalSinceReferenceDate
        model.tick(now: now, gravity: 220)
        gc.drawLayer { layer in
            layer.addFilter(.blur(radius: 3))
            layer.blendMode = .plusLighter
            for p in model.particles {
                // ... draw radial gradient circle
            }
        }
    }
}
.onTapGesture(coordinateSpace: .local) { loc in
    model.burst(at: loc, count: 60)
}

左侧是 Web 复刻（Motion / React），右侧是等价的 SwiftUI 写法。两边 spring 数学一致。