PricingLoginStart free
Swift Academy · Lektion

TimelineView og Canvas til højtydende tegning

Gengiv animationer i realtid med TimelineView-planer og Canvas-API'et.

Lektion 4 af 413 trin

TimelineView og Canvas til højtydende tegning er en gratis Swift Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Swift Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Swift Academy-kurset indeholder 4 lektioner i alt.

Oversigt over TimelineView

TimelineView tegner sit indhold igen efter en tidsplan, så realtidsanimationer kan oprettes uden timere.

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

Typer af TimelineSchedule

Indbyggede tidsplaner: .animation (ved hvert billede), .periodic (fast interval) og .explicit (bestemte datoer).

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

Oversigt over Canvas

Canvas leverer en 2D-tegnekontekst til højtydende grafik i immediate mode, på samme måde som Core Graphics.

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

Tegning af figurer i Canvas

Brug metoder fra GraphicsContext som fill, stroke og draw til at gengive kurver og billeder.

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

Kombination af TimelineView og Canvas

Pak en Canvas ind i TimelineView for at animere billede for billede uden opdateringer af 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))
  }
}

Opløsning af symboler

Kald ctx.resolve() for at opløse SwiftUI-visninger (som Image) til tegnbare symboler i 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 attributterede strenge i Canvas

Tegn tekst med ctx.draw(Text(...), at:) for at gengive brugerdefinerede etiketter i Canvas.

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

Transformationer og klipning

Anvend affine transformationer og klippestier på tegnekonteksten for at skabe 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))
}

Ydeevne sammenlignet med SwiftUI-visninger

Canvas gengiver al grafik i én tegnepassage — ideelt til partikelsystemer eller komplekse diagrammer, hvor tusindvis af visninger ville være for langsomme.

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

Tilgængelighed i Canvas

Indhold i Canvas er usynligt for VoiceOver. Tilføj tilgængelighedsetiketter via modifikatoren accessibilityChildren.

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

Tidsinterval i TimelineView

Konteksten leverer et cadence-fingerpeg (live, sekunder, minutter), så du kan reducere detaljegraden, når systemet er belastet.

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

Hurtigt tjek

Hvilken TimelineSchedule får TimelineView til at tegne indholdet igen ved hvert animationsbillede?

Besvar den i den interaktive lektion

Opsummering af lektionen

TimelineView tegner indholdet igen efter en tidsplan (ved hvert billede med .animation). Canvas leverer en 2D-tegnekontekst i immediate mode. Kombiner dem til højtydende partikkeleffekter, spil og live-diagrammer uden den ekstra belastning ved, at SwiftUI sammenligner visninger ved hvert billede.

Gratis at komme i gang

Lær Swift med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
122
Lektioner
409
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “TimelineView og Canvas til højtydende tegning” gratis?

Ja — alle 3 lektioner i læringssporet Swift Academy, inklusive “TimelineView og Canvas til højtydende tegning”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Swift Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “TimelineView og Canvas til højtydende tegning”?

Gengiv animationer i realtid med TimelineView-planer og Canvas-API'et. Du øver dig i Swift Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Swift Academy?

Der kræves ingen tidligere erfaring. Swift Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “TimelineView og Canvas til højtydende tegning”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Swift Academy-lektion?

Ja. Alle Swift Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Implicitte vs. eksplicitte animationer
  2. matchedGeometryEffect til hero-overgange
  3. Brugerdefineret AnimatableModifier og Animatable
  4. TimelineView og Canvas til højtydende tegning
← Tilbage til Swift Academy