PricingLoginStart free
Swift Academy · Oppitunti

TimelineView ja Canvas suorituskykyiseen piirtämiseen

Reaaliaikaisten animaatioiden renderöinti TimelineView-aikatauluilla ja Canvas-APIlla.

Oppitunti 4/413 vaihetta

TimelineView ja Canvas suorituskykyiseen piirtämiseen on ilmainen Swift Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Swift Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Swift Academy-kurssilla on yhteensä 4 oppituntia.

TimelineView-yleiskatsaus

TimelineView piirtää sisältönsä uudelleen aikataulun mukaisesti, mikä mahdollistaa reaaliaikaiset animaatiot ilman ajastimia.

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

TimelineSchedule-tyypit

Sisäänrakennetut aikataulut ovat .animation (jokainen kehys), .periodic (kiinteä aikaväli) ja .explicit (tietyt ajankohdat).

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

Canvas-yleiskatsaus

Canvas tarjoaa 2D-piirtokontekstin suorituskykyiseen immediate mode -grafiikkaan Core Graphicsin tapaan.

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

Muotojen piirtäminen Canvasissa

Käyttäkää GraphicsContext-metodeja, kuten fill, stroke ja draw, polkujen ja kuvien piirtämiseen.

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- ja Canvas-komponenttien yhdistäminen

Sijoittakaa Canvas TimelineView-komponentin sisään, jotta voitte animoida kuva kuvalta ilman SwiftUI:n tilapäivityksiä.

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

Symbolien ratkaiseminen

Kutsukaa ctx.resolve()-metodia SwiftUI-näkymien, kuten Imagen, muuttamiseksi Canvasissa piirrettäviksi symboleiksi.

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

Teksti ja Attributed String -merkkijonot Canvasissa

Piirtäkää tekstiä käyttämällä ctx.draw(Text(...), at:)-kutsua mukautettujen nimikkeiden piirtämiseen Canvasin sisällä.

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

Muunnokset ja leikkaus

Käyttäkää grafiikkakontekstissa affiineja muunnoksia ja leikkauspolkuja monimutkaisten tehosteiden luomiseen.

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

Suorituskyky verrattuna SwiftUI-näkymiin

Canvas piirtää kaiken grafiikan yhdellä piirto-operaatiolla — se sopii erinomaisesti hiukkasjärjestelmiin ja monimutkaisiin kaavioihin, joissa tuhannet näkymät olisivat liian hitaita.

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

Canvasin saavutettavuus

VoiceOver ei näe Canvasin sisältöä. Lisätkää saavutettavuusnimikkeet accessibilityChildren-muuntimen avulla.

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

TimelineView-komponentin cadence

Konteksti tarjoaa cadence-vihjeen (live, sekunnit, minuutit), jonka avulla voitte vähentää yksityiskohtia järjestelmän kuormittuessa.

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

Pikatarkistus

Mikä TimelineSchedule aiheuttaa TimelineView-komponentin piirtämisen uudelleen jokaisella animaatiokehyksellä?

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

TimelineView piirtää sisällön uudelleen aikataulun mukaisesti (jokaisella kehyksellä, kun käytössä on .animation). Canvas tarjoaa immediate mode -tyyppisen 2D-piirtokontekstin. Yhdistämällä ne voitte toteuttaa suorituskykyisiä hiukkastehosteita, pelejä ja reaaliaikaisia kaavioita ilman SwiftUI-näkymien jokaisen kehyksen aikaista erotuslaskennan kuormaa.

Aloita maksutta

Opi Swift tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
122
Oppitunnit
409
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”TimelineView ja Canvas suorituskykyiseen piirtämiseen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Swift Academy-oppimispolun 3 oppituntia, myös oppitunnin “TimelineView ja Canvas suorituskykyiseen piirtämiseen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Swift Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”TimelineView ja Canvas suorituskykyiseen piirtämiseen”?

Reaaliaikaisten animaatioiden renderöinti TimelineView-aikatauluilla ja Canvas-APIlla. Harjoittelet Swift Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Swift Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Swift Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”TimelineView ja Canvas suorituskykyiseen piirtämiseen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Swift Academy-oppitunnilla?

Kyllä. Jokainen Swift Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Implisiittiset ja eksplisiittiset animaatiot
  2. matchedGeometryEffect ja näyttävät siirtymät
  3. Mukautettu AnimatableModifier ja Animatable
  4. TimelineView ja Canvas suorituskykyiseen piirtämiseen
← Takaisin: Swift Academy