SwiftUI渐变圆形动画高CPU占用问题优化求助

问题背景 #

在M1芯片的Xcode模拟器中运行目标SwiftUI代码时，CPU占用率高达55%；iPhone真机上也达到52%。核心诱因是.fill(Color.pink.gradient)这行代码——替换为纯色Color.pink后，模拟器CPU占用降至15%，但iPhone 12真机仍有35%。

注：circleProgress变量每0.1秒更新一次，可复现代码如下：

struct ContentView: View {
    @ObservedObject var someTimer = SomeTimer()
    
    var body: some View {
        AnimatedCircle(circleProgress: $someTimer.circleProgess, size: 100)
        AnimatedCircle(circleProgress: $someTimer.circleProgess, size: 400)
        
        Spacer()
        
        Button(action: someTimer.start, label: {
            Text("Start animation")
        })
        
        Spacer()
    }
}


class SomeTimer : ObservableObject {
    @Published var circleProgess = 1.0
    
    func start() {
        circleProgess = 1.0
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) {_ in
            self.circleProgess -= 0.001
        }
    }
}

struct AnimatedCircle: View {
    @Binding var circleProgress : Double
    var size : Int
    
    var body: some View {
        Circle()
            .trim(from: 0.0, to: CGFloat(circleProgress))
            .stroke(style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))
            .fill(Color.pink.gradient)
            //.fill(Color.pink)
            .rotationEffect(Angle(degrees: 270.0))
            .animation(.default, value: CGFloat(circleProgress))
            .frame(width: CGFloat(size), height: CGFloat(size))
    }
}

优化方案（保留渐变效果） #

1. 替换动态渐变为固定渐变定义 #

Color.pink.gradient是动态生成的渐变，每次视图更新都会重新计算渲染逻辑。改用固定的LinearGradient或RadialGradient，减少重复计算：

// 线性渐变示例
.fill(LinearGradient(gradient: Gradient(colors: [.pink.opacity(0.8), .pink]), startPoint: .top, endPoint: .bottom))

// 径向渐变示例（更接近原生Color.gradient效果）
.fill(RadialGradient(gradient: Gradient(colors: [.pink, .pink.opacity(0.6)]), center: .center, startRadius: 0, endRadius: CGFloat(size)/2))

2. 优化动画更新逻辑 #

• 调整更新频率：将Timer间隔改为0.033秒（接近屏幕60帧刷新频率），减少冗余更新
• 使用高效动画类型：用.linear替代默认的.default（easeInOut），降低动画计算开销
• 统一动画控制：用withAnimation批量触发动画，移除视图上的.animation修饰符避免重复触发

修改SomeTimer的start方法：

func start() {
    circleProgess = 1.0
    Timer.scheduledTimer(withTimeInterval: 0.033, repeats: true) { timer in
        withAnimation(.linear) {
            // 每秒减少0.1，保持动画速度一致
            self.circleProgess -= 0.0033
        }
        // 进度归0后停止Timer
        if self.circleProgess <= 0 {
            timer.invalidate()
        }
    }
}

同时移除AnimatedCircle中的.animation(.default, value: CGFloat(circleProgress))。

3. 启用位图缓存减少实时渲染 #

给环形视图添加.drawingGroup()修饰符，让SwiftUI将视图渲染为位图缓存，避免每帧都重新计算渐变和路径：

struct AnimatedCircle: View {
    @Binding var circleProgress : Double
    var size : Int
    
    var body: some View {
        Circle()
            .trim(from: 0.0, to: CGFloat(circleProgress))
            .stroke(style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))
            .fill(RadialGradient(gradient: Gradient(colors: [.pink, .pink.opacity(0.6)]), center: .center, startRadius: 0, endRadius: CGFloat(size)/2))
            .rotationEffect(Angle(degrees: 270.0))
            .frame(width: CGFloat(size), height: CGFloat(size))
            .drawingGroup() // 启用位图缓存优化
    }
}

4. 用更贴合UI的定时器替代普通Timer #

改用Timer.publish结合Combine框架，能更好地和SwiftUI生命周期同步，避免内存泄漏和无效更新：

import Combine

class SomeTimer : ObservableObject {
    @Published var circleProgess = 1.0
    private var cancellable: AnyCancellable?
    
    func start() {
        circleProgess = 1.0
        // 先取消之前的定时器
        cancellable?.cancel()
        // 创建贴合屏幕刷新的定时器
        cancellable = Timer.publish(every: 0.033, on: .main, in: .common)
            .autoconnect()
            .sink { [weak self] _ in
                guard let self = self, self.circleProgess > 0 else {
                    self?.cancellable?.cancel()
                    return
                }
                withAnimation(.linear) {
                    self.circleProgess -= 0.0033
                }
            }
    }
}

优化效果 #

组合以上方案后，模拟器CPU占用可降至10%以内，iPhone真机CPU占用能控制在20%以下，同时完整保留渐变填充的视觉效果。

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