Swift Academy · Leçon

TimelineView et Canvas pour un dessin haute performance

Rendre des animations en temps réel avec les planifications de TimelineView et l’API Canvas.

Leçon 4 sur 413 étapes

TimelineView et Canvas pour un dessin haute performance est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

Présentation de TimelineView

TimelineView redessine son contenu selon une planification, ce qui permet de créer des animations en temps réel sans minuteurs.

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

Types de TimelineSchedule

Planifications intégrées : .animation (à chaque image), .periodic (à intervalles fixes) et .explicit (à des dates précises).

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

Présentation de Canvas

Canvas fournit un contexte de dessin 2D pour des graphiques performants en mode immédiat, semblables à ceux de Core Graphics.

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

Dessiner des formes dans Canvas

Utilisez les méthodes de GraphicsContext, telles que fill, stroke et draw, pour afficher des chemins et des images.

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

Combiner TimelineView et Canvas

Placez un Canvas dans TimelineView pour créer une animation image par image sans mises à jour de l’état 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))
  }
}

Résoudre des symboles

Appelez ctx.resolve() pour convertir des vues SwiftUI, comme Image, en symboles pouvant être dessinés dans 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")
}

Texte et chaînes avec attributs dans Canvas

Dessinez du texte avec ctx.draw(Text(...), at:) afin d’effectuer un rendu personnalisé des libellés dans Canvas.

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

Transformations et découpage

Appliquez des transformations affines et des chemins de découpage au contexte graphique pour créer des effets complexes.

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

Performance par rapport aux vues SwiftUI

Canvas effectue le rendu de tous les graphiques en une seule passe de dessin : c’est idéal pour les systèmes de particules ou les graphiques complexes pour lesquels des milliers de vues seraient trop lentes.

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

Accessibilité dans Canvas

Le contenu de Canvas est invisible pour VoiceOver. Ajoutez des libellés d’accessibilité à l’aide du modificateur accessibilityChildren.

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

Cadence de TimelineView

Le contexte fournit un indice de cadence (en direct, secondes, minutes), ce qui vous permet de réduire le niveau de détail lorsque le système est fortement sollicité.

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

Vérification rapide

Quel TimelineSchedule demande à TimelineView de redessiner le contenu à chaque image de l’animation ?

Réponds-y dans la leçon interactive

Récapitulatif de la leçon

TimelineView redessine le contenu selon une planification (à chaque image avec .animation). Canvas fournit un contexte de dessin 2D en mode immédiat. Combinez-les pour créer des effets de particules, des jeux et des graphiques en temps réel très performants, sans le coût de comparaison des vues SwiftUI à chaque image.

Gratuit pour commencer

Apprends Swift avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 122
Leçons: 409

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « TimelineView et Canvas pour un dessin haute performance » est-elle gratuite ?

Oui — le texte complet de « TimelineView et Canvas pour un dessin haute performance » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « TimelineView et Canvas pour un dessin haute performance » ?

Rendre des animations en temps réel avec les planifications de TimelineView et l’API Canvas. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « TimelineView et Canvas pour un dessin haute performance » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Animations implicites et explicites
matchedGeometryEffect pour les transitions héroïques
AnimatableModifier et Animatable personnalisés
TimelineView et Canvas pour un dessin haute performance

← Retour à Swift Academy