如何让SwiftUI动画更流畅？解决trim圆形进度动画抖动问题

使用SwiftUI开发过程中，实现完全无卡顿、无肉眼可感知延迟抖动的动画存在一定门槛，以下以秒表进度动画场景为例，整理问题复现方式与优化方向，核心目标是让周期性状态更新触发的动画达到丝滑流畅的效果。

问题复现 #

基础实现方案通过Shape配合trim修饰符完成进度动画绘制，示例代码已做简化，例如@State private var progress: CGFloat也可替换为ViewModel中的可观察属性：

struct ContentView: View {
    static let speed: TimeInterval = 0.5
       
    var body: some View {
        TimelineView(.periodic(from: .now, by: Self.speed)) { (context) in
            Stopwatch(date: context.date)
                .padding()
        }
    }
}

struct Stopwatch: View {
    @State private var progress: CGFloat = 0
    let date: Date
    
    var body: some View {
        Circle()
            .trim(from: 0, to: progress)
            .stroke(style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))
            .foregroundColor(.green)
            .animation(.linear(duration: ContentView.speed), value: progress)
            .onChange(of: date) { (_) in
                if progress == 1 {
                    progress = 0
                }
                else {
                    progress += 0.2
                }
            }
    }
}

在模拟器或真机运行上述代码，紧盯动画移动的线条仔细观察，会偶尔出现小幅抖动。受GIF格式表现力限制，动图无法清晰还原实际问题，建议直接在Xcode中运行代码复现。实际测试可观察到：动画线条移动到约6点钟、11点钟、13点钟位置时会出现明显小幅抖动，观感类似动画帧率（FPS）偏低，且在这些点位帧率会进一步下跌。

补充说明：即使不使用周期性状态更新，抖动问题依然存在。使用如下极简实现时问题同样存在，仅表现相对不明显：

Circle()
    .trim(from: 0, to: animating ? 1 : 0)
    .stroke(style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))
    .foregroundColor(.green)
    .animation(.linear(duration: 3)
    .repeatForever(autoreverses: true), value: animating)

问题效果参考：

可落地优化方案 #

• 替换分段拼接动画的实现逻辑：原方案每0.5秒触发一次状态更新、再补0.5秒线性动画的逻辑，本质是把连续动画拆成多段拼接，两段动画的衔接点很容易因为主线程调度出现微小错位，表现为抖动。连续进度类动画不要用分段状态更新拼接，直接驱动连续的可动画属性即可。
• 自定义Animatable Shape规避插值开销：不要依赖onChange修改状态触发动画，直接自定义遵循Animatable协议的Shape，把进度值作为可动画属性，让SwiftUI直接在渲染层完成属性插值，减少状态同步带来的调度延迟。
• 开启绘制合并优化：给描边的图形添加.drawingGroup()修饰符，将Shape的绘制合并到离屏渲染通道，减少GPU绘制调用开销，避免路径分段绘制时的帧率波动。
• 规避系统线帽渲染bug：实测使用lineCap: .round时，在圆周几个固定角度点会出现Core Animation对线条端点的抗锯齿计算异常，是固定点位抖动的核心诱因。可以先将线帽替换为.butt验证，如果抖动消失，可通过在trim结束位置手动绘制同线宽的圆形作为端点，替代系统自带的round线帽，绕开系统渲染bug。
• 高流畅度场景降级到底层渲染框架：如果对动画流畅度要求极高，可以封装CAShapeLayer通过UIViewRepresentable/NSViewRepresentable接入SwiftUI，直接用Core Animation驱动strokeEnd属性做动画，绕开SwiftUI Shape的动画插值计算开销，流畅度和稳定性会明显优于纯SwiftUI原生Shape实现。

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