让 Core Animation 更加流畅

2023-10-16 15:41:19

Core Animation 的进步提升了 SwiftUI 动画效果

GPU 加速动画

Core Animation 已利用 Apple 的 Metal 图形框架，在 GPU 上处理动画。这显著增强了动画性能，尤其是在渲染复杂图形和效果时。通过将动画计算卸载到 GPU，CPU 可腾出资源执行其他任务，从而提升应用程序的整体响应能力。

响应优先级

Core Animation 引入了响应优先级系统，允许开发者指定动画的重要性。这使应用程序在资源受限时优先处理关键动画，确保流畅的用户体验。例如，加载进度条的动画可设为低优先级，而界面元素交互动画则设为高优先级。

帧速率控制

Core Animation 现提供对帧速率的更精细控制。开发者可指定动画的理想帧速率，在性能和视觉质量间取得平衡。对于交互式动画，可使用更高的帧速率以实现更流畅的体验，而对于非关键动画，可使用较低的帧速率以节省电量。

使用 SwiftUI 的新动画 API

SwiftUI 引入了新动画 API，简化了动画效果的创建。例如，withAnimation 修饰符允许开发者将动画应用于任意视图，而 Animation 结构允许创建自定义动画过渡。这些新 API 无缝集成 Core Animation 底层优化，提供强大且易用的动画工具包。

示例：优化加载进度条动画

考虑如下 SwiftUI 加载进度条示例：

struct LoadingView: View {
  @State private var progress: Double = 0.0

  var body: some View {
    ZStack {
      ProgressView(value: progress)
        .frame(width: 200, height: 20)
    }
    .onAppear {
      withAnimation(.linear(duration: 0.5)) {
        progress = 1.0
      }
    }
  }
}

默认情况下，此动画在 CPU 上执行，并且由于 ProgressView 视图的复杂性，它可能导致应用程序性能下降。要优化此动画，我们可以利用 Core Animation 的 GPU 加速功能：

struct LoadingView: View {
  @State private var progress: Double = 0.0

  var body: some View {
    ZStack {
      ProgressView(value: progress)
        .frame(width: 200, height: 20)
        .overlay(
          Rectangle()
            .fill(Color.clear)
            .frame(width: 200, height: 20)
            .background(
              GeometryReader { proxy in
                Color.blue
                  .frame(width: proxy.size.width * progress)
              }
            )
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .allowsHitTesting(false)
        )
    }
    .onAppear {
      withAnimation(.linear(duration: 0.5)) {
        progress = 1.0
      }
    }
  }
}