高パフォーマンス描画のためのTimelineViewとCanvas
TimelineViewのスケジュールとCanvas APIでリアルタイムアニメーションを描画します。
「高パフォーマンス描画のためのTimelineViewとCanvas」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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に似た、高パフォーマンスの即時モードグラフィックス用2D描画コンテキストを提供します。
Canvas { ctx, size in
ctx.fill(
Path(ellipseIn: CGRect(origin: .zero, size: size)),
with: .color(.blue)
)
}CanvasでのShapeの描画
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の組み合わせ
TimelineView内にCanvasを配置すると、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でのテキストとAttributed String
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はすべてのグラフィックスを1回の描画パスで描画します。そのため、数千個のビューでは遅くなりすぎるパーティクルシステムや複雑なチャートに適しています。
// Benchmark: 500 moving dots
// Canvas: ~120fps on iPhone
// SwiftUI views: ~30fps due to view tree overheadCanvasのアクセシビリティ
CanvasのコンテンツはVoiceOverから見えません。accessibilityChildrenモディファイアを使ってアクセシビリティラベルを追加してください。
Canvas { ctx, size in
// draw chart bars
}
.accessibilityChildren {
ForEach(bars) { Text("\($0.label): \($0.value)") }
}TimelineViewの更新頻度
コンテキストはcadenceのヒント（live、seconds、minutes）を提供するため、システムに負荷がかかっているときに詳細度を下げられます。
TimelineView(.animation) { ctx in
if ctx.cadence == .live {
HighDetailAnimation(date: ctx.date)
} else {
LowDetailAnimation(date: ctx.date)
}
}理解度チェック
TimelineViewをアニメーションの各フレームで再描画させるTimelineScheduleはどれですか？
レッスンのまとめ
TimelineViewはスケジュールに従って再描画します（.animationではフレームごとに再描画します）。Canvasは即時モードの2D描画コンテキストを提供します。これらを組み合わせると、フレームごとのSwiftUIビュー差分計算のオーバーヘッドなしで、高パフォーマンスのパーティクル効果、ゲーム、ライブチャートを実現できます。
よくある質問
「高パフォーマンス描画のためのTimelineViewとCanvas」レッスンは無料ですか？
はい。「高パフォーマンス描画のためのTimelineViewとCanvas」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「高パフォーマンス描画のためのTimelineViewとCanvas」で何を学びますか？
TimelineViewのスケジュールとCanvas APIでリアルタイムアニメーションを描画します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「高パフォーマンス描画のためのTimelineViewとCanvas」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 暗黙的アニメーションと明示的アニメーション
- ヒーロートランジションのためのmatchedGeometryEffect
- カスタムAnimatableModifierとAnimatable
- 高パフォーマンス描画のためのTimelineViewとCanvas