Swift Academy · 课时

TimelineView 与 Canvas 高性能绘制

Q: 「TimelineView 与 Canvas 高性能绘制」这节课中我会学到什么？

使用 TimelineView 调度和 Canvas API 渲染实时动画。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 TimelineView 调度和 Canvas API 渲染实时动画。

TimelineView 与 Canvas 高性能绘制 是 CoddyKit 上的免费 Swift Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Swift Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。

TimelineView 概览

TimelineView 会按照计划重新绘制内容，从而无需计时器即可实现实时动画。

TimelineView(.animation) { timeline in
  Text(timeline.date.formatted(date: .omitted, time: .standard))
}

TimelineSchedule 类型

内置计划包括：.animation（每个帧）、.periodic（固定间隔）和 .explicit（指定日期）。

TimelineView(.periodic(from: .now, by: 1.0)) { context in
  ClockFace(date: context.date)
}

Canvas 概览

Canvas 提供用于高性能即时模式图形的二维绘图上下文，类似于 Core Graphics。

Canvas { ctx, size in
  ctx.fill(
    Path(ellipseIn: CGRect(origin: .zero, size: size)),
    with: .color(.blue)
  )
}

在 Canvas 中绘制形状

使用 GraphicsContext 的 fill、stroke 和 draw 等方法来绘制路径和图像。

Canvas { ctx, size in
  var path = Path()
  path.move(to: .zero)
  path.addLine(to: CGPoint(x: size.width, y: size.height))
  ctx.stroke(path, with: .color(.red), lineWidth: 2)
}

组合使用 TimelineView 和 Canvas

将 Canvas 放在 TimelineView 内，即可逐帧执行动画，而无需更新 SwiftUI 状态。

TimelineView(.animation) { timeline in
  Canvas { ctx, size in
    let t = timeline.date.timeIntervalSinceReferenceDate
    let x = size.width * (0.5 + 0.4 * cos(t))
    let y = size.height * (0.5 + 0.4 * sin(t))
    ctx.fill(Path(ellipseIn: CGRect(x: x-10, y: y-10, width: 20, height: 20)), with: .color(.orange))
  }
}

解析符号

调用 ctx.resolve()，将 SwiftUI 视图（例如 Image）解析为可供 Canvas 绘制的符号。

Canvas { ctx, size in
  let symbol = ctx.resolveSymbol(id: "star")!
  ctx.draw(symbol, at: CGPoint(x: 50, y: 50))
} symbols: {
  Image(systemName: "star.fill").tag("star")
}

Canvas 中的文本和富文本字符串

使用 ctx.draw(Text(...), at:) 绘制文本，以便在 Canvas 内自定义标签的渲染方式。

Canvas { ctx, size in
  ctx.draw(
    Text("Score: 100").font(.title).foregroundStyle(.white),
    at: CGPoint(x: size.width/2, y: 30)
  )
}

变换和裁剪

对绘图上下文应用仿射变换和裁剪路径，以实现复杂效果。

Canvas { ctx, size in
  ctx.translateBy(x: size.width/2, y: size.height/2)
  ctx.rotate(by: .degrees(45))
  ctx.fill(Path(CGRect(x: -50, y: -50, width: 100, height: 100)), with: .color(.purple))
}

与 SwiftUI 视图的性能比较

Canvas 会在一次绘制过程中渲染所有图形，非常适合粒子系统或复杂图表；如果使用成千上万个视图，速度会过慢。

// Benchmark: 500 moving dots
// Canvas: ~120fps on iPhone
// SwiftUI views: ~30fps due to view tree overhead

Canvas 中的辅助功能

Canvas 内容对 VoiceOver 不可见。请通过 accessibilityChildren 修饰器添加辅助功能标签。

Canvas { ctx, size in
  // draw chart bars
}
.accessibilityChildren {
  ForEach(bars) { Text("\($0.label): \($0.value)") }
}

TimelineView 的更新频率

上下文会提供 cadence 提示（实时、秒、分钟），因此您可以在系统负载较高时降低细节程度。

TimelineView(.animation) { ctx in
  if ctx.cadence == .live {
    HighDetailAnimation(date: ctx.date)
  } else {
    LowDetailAnimation(date: ctx.date)
  }
}

快速检查

哪个 TimelineSchedule 会使 TimelineView 在每个动画帧都重新绘制？

课程回顾

TimelineView 会按计划重新绘制（使用 .animation 时逐帧绘制）。Canvas 提供即时模式的二维绘图上下文。将两者结合，可以在无需承担逐帧 SwiftUI 视图差异计算开销的情况下，实现高性能粒子效果、游戏和实时图表。

常见问题解答

「TimelineView 与 Canvas 高性能绘制」课时是免费的吗？

是的 — 「TimelineView 与 Canvas 高性能绘制」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Swift Academy 课程的其余内容，请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。

「TimelineView 与 Canvas 高性能绘制」这节课中我会学到什么？

使用 TimelineView 调度和 Canvas API 渲染实时动画。你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Swift Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「TimelineView 与 Canvas 高性能绘制」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Swift Academy 课中编写并运行代码吗？

能。每节 Swift Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Swift Academy