PricingLoginStart free
Swift Academy · leksjon

TimelineView og Canvas for tegning med høy ytelse

Gjengi sanntidsanimasjoner med TimelineView-planer og Canvas-API-et.

Leksjon 4 av 413 trinn

TimelineView og Canvas for tegning med høy ytelse er en gratis leksjon i Swift Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Swift Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Oversikt over TimelineView

TimelineView tegner innholdet på nytt etter en tidsplan, slik at sanntidsanimeringer kan utføres uten tidtakere.

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

Typer av TimelineSchedule

Innebygde tidsplaner: .animation (hver ramme), .periodic (fast intervall), .explicit (bestemte datoer).

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

Oversikt over Canvas

Canvas tilbyr en 2D-tegningskontekst for høytytende immediate mode-grafikk, tilsvarende Core Graphics.

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

Tegne former i Canvas

Bruk metoder i GraphicsContext, for eksempel fill, stroke og draw, for å tegne baner og bilder.

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)
}

Kombinere TimelineView og Canvas

Pakk en Canvas inn i TimelineView for bilderamme-for-bilderamme-animering uten oppdateringer av SwiftUI-tilstanden.

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))
  }
}

Løse symboler

Kall ctx.resolve() for å konvertere SwiftUI-visninger, for eksempel Image, til tegnbare symboler for 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")
}

Tekst og attributerte strenger i Canvas

Tegn tekst med ctx.draw(Text(...), at:) for egendefinert gjengivelse av etiketter i Canvas.

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

Transformasjoner og klipping

Bruk affine transformasjoner og klippebaner på grafikkonteksten for komplekse effekter.

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))
}

Ytelse sammenlignet med SwiftUI-visninger

Canvas gjengir all grafikk i én tegneoperasjon – ideelt for partikkelsystemer eller komplekse diagrammer der tusenvis av visninger ville vært for trege.

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

Tilgjengelighet i Canvas

Canvas-innhold er usynlig for VoiceOver. Legg til tilgjengelighetsetiketter via modifikatoren accessibilityChildren.

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

TimelineView-frekvens

Konteksten tilbyr et cadence-tips (live, sekunder, minutter), slik at De kan redusere detaljnivået når systemet er belastet.

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

Kort kontroll

Hvilken TimelineSchedule får TimelineView til å tegne innholdet på nytt ved hver animasjonsramme?

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

TimelineView tegner innholdet på nytt etter en tidsplan (for hver ramme med .animation). Canvas tilbyr en 2D-tegningskontekst i immediate mode. Kombiner dem for høytytende partikkeleffekter, spill og sanntidsdiagrammer uten kostnadene ved at SwiftUI sammenligner visninger for hver ramme.

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
122
Leksjoner
409
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «TimelineView og Canvas for tegning med høy ytelse» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Swift Academy, inkludert «TimelineView og Canvas for tegning med høy ytelse», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «TimelineView og Canvas for tegning med høy ytelse»?

Gjengi sanntidsanimasjoner med TimelineView-planer og Canvas-API-et. Du øver på Swift Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Swift Academy?

Ingen tidligere erfaring er nødvendig. Swift Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «TimelineView og Canvas for tegning med høy ytelse»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Swift Academy-leksjonen?

Ja. Alle Swift Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Implisitte kontra eksplisitte animasjoner
  2. matchedGeometryEffect for hero-overganger
  3. Egendefinert AnimatableModifier og Animatable
  4. TimelineView og Canvas for tegning med høy ytelse
← Tilbake til Swift Academy