TimelineView e Canvas para desenho de alto desempenho
Renderize animações em tempo real com agendas do TimelineView e a API Canvas.
TimelineView e Canvas para desenho de alto desempenho é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.
Visão geral de TimelineView
TimelineView redesenha seu conteúdo conforme uma programação, permitindo animações em tempo real sem temporizadores.
TimelineView(.animation) { timeline in
Text(timeline.date.formatted(date: .omitted, time: .standard))
}Tipos de TimelineSchedule
Programações integradas: .animation (a cada quadro), .periodic (intervalo fixo) e .explicit (datas específicas).
TimelineView(.periodic(from: .now, by: 1.0)) { context in
ClockFace(date: context.date)
}Visão geral de Canvas
Canvas fornece um contexto de desenho 2D para gráficos de alto desempenho em modo imediato, semelhante ao Core Graphics.
Canvas { ctx, size in
ctx.fill(
Path(ellipseIn: CGRect(origin: .zero, size: size)),
with: .color(.blue)
)
}Desenhando formas no Canvas
Use métodos de GraphicsContext, como fill, stroke e draw, para renderizar caminhos e imagens.
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)
}Combinando TimelineView e Canvas
Envolva um Canvas dentro de TimelineView para criar animações quadro a quadro sem atualizações de estado do 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))
}
}Resolvendo símbolos
Chame ctx.resolve() para resolver visualizações do SwiftUI, como Image, em símbolos desenháveis para 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")
}Texto e cadeias atribuídas no Canvas
Desenhe texto usando ctx.draw(Text(...), at:) para renderizar rótulos personalizados dentro do Canvas.
Canvas { ctx, size in
ctx.draw(
Text("Score: 100").font(.title).foregroundStyle(.white),
at: CGPoint(x: size.width/2, y: 30)
)
}Transformações e recorte
Aplique transformações afins e caminhos de recorte ao contexto gráfico para criar efeitos complexos.
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))
}Desempenho em comparação com visualizações SwiftUI
O Canvas renderiza todos os gráficos em uma única passagem de desenho — ideal para sistemas de partículas ou gráficos complexos nos quais milhares de visualizações seriam lentos demais.
// Benchmark: 500 moving dots
// Canvas: ~120fps on iPhone
// SwiftUI views: ~30fps due to view tree overheadAcessibilidade no Canvas
O conteúdo do Canvas fica invisível para o VoiceOver. Adicione rótulos de acessibilidade usando o modificador accessibilityChildren.
Canvas { ctx, size in
// draw chart bars
}
.accessibilityChildren {
ForEach(bars) { Text("\($0.label): \($0.value)") }
}Cadência do TimelineView
O contexto fornece uma indicação de cadence (ao vivo, segundos ou minutos) para que você possa reduzir os detalhes quando o sistema estiver sob carga.
TimelineView(.animation) { ctx in
if ctx.cadence == .live {
HighDetailAnimation(date: ctx.date)
} else {
LowDetailAnimation(date: ctx.date)
}
}Verificação rápida
Qual TimelineSchedule faz o TimelineView redesenhar a cada quadro da animação?
Recapitulação da lição
TimelineView redesenha conforme uma programação (a cada quadro com .animation). Canvas fornece um contexto de desenho 2D em modo imediato. Combine-os para criar efeitos de partículas, jogos e gráficos em tempo real de alto desempenho, sem a sobrecarga da comparação de visualizações do SwiftUI a cada quadro.
Perguntas Frequentes
A aula “TimelineView e Canvas para desenho de alto desempenho” é grátis?
Sim — o texto completo de “TimelineView e Canvas para desenho de alto desempenho” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.
O que vou aprender em “TimelineView e Canvas para desenho de alto desempenho”?
Renderize animações em tempo real com agendas do TimelineView e a API Canvas. Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Swift Academy?
Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “TimelineView e Canvas para desenho de alto desempenho”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Swift Academy?
Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Animações implícitas e explícitas
- matchedGeometryEffect para transições hero
- AnimatableModifier e Animatable personalizados
- TimelineView e Canvas para desenho de alto desempenho