TimelineView e Canvas per il disegno ad alte prestazioni
Renderizzare animazioni in tempo reale con le pianificazioni di TimelineView e l’API Canvas.
TimelineView e Canvas per il disegno ad alte prestazioni è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.
Panoramica di TimelineView
TimelineView ridisegna il proprio contenuto secondo una pianificazione, consentendo animazioni in tempo reale senza timer.
TimelineView(.animation) { timeline in
Text(timeline.date.formatted(date: .omitted, time: .standard))
}Tipi di TimelineSchedule
Pianificazioni integrate: .animation (a ogni fotogramma), .periodic (a intervalli fissi), .explicit (in date specifiche).
TimelineView(.periodic(from: .now, by: 1.0)) { context in
ClockFace(date: context.date)
}Panoramica di Canvas
Canvas fornisce un contesto di disegno 2D per grafica immediate-mode ad alte prestazioni, simile a Core Graphics.
Canvas { ctx, size in
ctx.fill(
Path(ellipseIn: CGRect(origin: .zero, size: size)),
with: .color(.blue)
)
}Disegno di forme in Canvas
Utilizzi metodi di GraphicsContext come fill, stroke e draw per visualizzare percorsi e immagini.
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)
}Combinazione di TimelineView e Canvas
Inserisca un Canvas all'interno di TimelineView per creare un'animazione fotogramma per fotogramma senza aggiornamenti dello stato di 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))
}
}Risoluzione dei simboli
Chiami ctx.resolve() per convertire le viste SwiftUI, come Image, in simboli disegnabili per 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")
}Testo e stringhe attribuite in Canvas
Disegni il testo usando ctx.draw(Text(...), at:) per eseguire il rendering personalizzato delle etichette all'interno di Canvas.
Canvas { ctx, size in
ctx.draw(
Text("Score: 100").font(.title).foregroundStyle(.white),
at: CGPoint(x: size.width/2, y: 30)
)
}Trasformazioni e ritaglio
Applichi trasformazioni affini e percorsi di ritaglio al contesto grafico per ottenere effetti complessi.
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))
}Prestazioni rispetto alle viste SwiftUI
Canvas esegue il rendering di tutta la grafica in un unico passaggio di disegno: è ideale per sistemi di particelle o grafici complessi in cui migliaia di viste sarebbero troppo lente.
// Benchmark: 500 moving dots
// Canvas: ~120fps on iPhone
// SwiftUI views: ~30fps due to view tree overheadAccessibilità in Canvas
Il contenuto di Canvas non è visibile a VoiceOver. Aggiunga etichette di accessibilità tramite il modificatore accessibilityChildren.
Canvas { ctx, size in
// draw chart bars
}
.accessibilityChildren {
ForEach(bars) { Text("\($0.label): \($0.value)") }
}Frequenza di aggiornamento di TimelineView
Il contesto fornisce un'indicazione cadence (in tempo reale, secondi, minuti), così può ridurre i dettagli quando il sistema è sotto carico.
TimelineView(.animation) { ctx in
if ctx.cadence == .live {
HighDetailAnimation(date: ctx.date)
} else {
LowDetailAnimation(date: ctx.date)
}
}Verifica rapida
Quale TimelineSchedule fa sì che TimelineView venga ridisegnato a ogni fotogramma dell'animazione?
Riepilogo della lezione
TimelineView ridisegna secondo una pianificazione (a ogni fotogramma con .animation). Canvas fornisce un contesto di disegno 2D immediate-mode. Li combini per creare effetti di particelle, giochi e grafici in tempo reale ad alte prestazioni, senza il sovraccarico del confronto tra viste SwiftUI a ogni fotogramma.
Domande Frequenti
La lezione «TimelineView e Canvas per il disegno ad alte prestazioni» è gratuita?
Sì — il testo completo di «TimelineView e Canvas per il disegno ad alte prestazioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.
Cosa imparerò in «TimelineView e Canvas per il disegno ad alte prestazioni»?
Renderizzare animazioni in tempo reale con le pianificazioni di TimelineView e l’API Canvas. Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Swift Academy?
Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «TimelineView e Canvas per il disegno ad alte prestazioni»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Swift Academy?
Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Animazioni implicite ed esplicite
- matchedGeometryEffect per transizioni hero
- AnimatableModifier e Animatable personalizzati
- TimelineView e Canvas per il disegno ad alte prestazioni