SwiftUI 不是“真原生”？别争标签，先测清动画为什么掉帧

import SwiftUI
import QuartzCore
import Combine

@main
struct AnimationProbeApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

final class FrameProbe: ObservableObject {
    @Published private(set) var fps: Double = 0
    @Published private(set) var estimatedDroppedFrames = 0

    private var displayLink: CADisplayLink?
    private var previousTimestamp: CFTimeInterval?

    func start() {
        guard displayLink == nil else { return }

        let link = CADisplayLink(target: self, selector: #selector(tick(_:)))
        link.add(to: .main, forMode: .common)
        displayLink = link
    }

    func stop() {
        displayLink?.invalidate()
        displayLink = nil
        previousTimestamp = nil
    }

    @objc private func tick(_ link: CADisplayLink) {
        defer { previousTimestamp = link.timestamp }
        guard let previousTimestamp else { return }

        let elapsed = link.timestamp - previousTimestamp
        let frameBudget = link.duration
        guard elapsed > 0, frameBudget > 0 else { return }

        fps = 1.0 / elapsed

        if elapsed > frameBudget * 1.5 {
            let elapsedFrames = Int((elapsed / frameBudget).rounded())
            estimatedDroppedFrames += max(1, elapsedFrames - 1)
        }
    }
}

struct ContentView: View {
    @StateObject private var probe = FrameProbe()
    @State private var rotating = false
    @State private var circleCount = 120

    var body: some View {
        VStack(spacing: 20) {
            Text("FPS: \(probe.fps, specifier: \"%.1f\")")
                .font(.system(.title2, design: .monospaced))

            Text("估算丢帧：\(probe.estimatedDroppedFrames)")
                .foregroundStyle(.secondary)

            ZStack {
                ForEach(0..<circleCount, id: \.self) { index in
                    let angle = Double(index) / Double(circleCount) * 2 * Double.pi

                    Circle()
                        .fill(index.isMultiple(of: 2) ? .blue : .cyan)
                        .frame(width: 8, height: 8)
                        .offset(
                            x: cos(angle) * 100,
                            y: sin(angle) * 100
                        )
                }
            }
            .frame(width: 240, height: 240)
            .rotationEffect(.degrees(rotating ? 360 : 0))
            .animation(
                .linear(duration: 2).repeatForever(autoreverses: false),
                value: rotating
            )

            Stepper("圆点数量：\(circleCount)", value: $circleCount, in: 20...800, step: 20)

            Button("故意阻塞主线程 200 ms") {
                Thread.sleep(forTimeInterval: 0.2)
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
        .onAppear {
            probe.start()
            rotating = true
        }
        .onDisappear {
            probe.stop()
        }
    }
}