0Pricing
Swift Academy · Lección

TimelineView y Canvas para dibujo de alto rendimiento

Renderice animaciones en tiempo real con las programaciones de TimelineView y la API Canvas.

TimelineView y Canvas para dibujo de alto rendimiento es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

Descripción general de TimelineView

TimelineView vuelve a dibujar su contenido según una programación, lo que permite crear animaciones en tiempo real sin temporizadores.

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

Tipos de TimelineSchedule

Programaciones integradas: .animation (en cada fotograma), .periodic (intervalo fijo) y .explicit (fechas específicas).

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

Descripción general de Canvas

Canvas proporciona un contexto de dibujo 2D para gráficos de alto rendimiento en modo inmediato, similar a Core Graphics.

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

Dibujo de formas en Canvas

Use métodos de GraphicsContext como fill, stroke y draw para representar trayectorias e imágenes.

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

Combinación de TimelineView y Canvas

Incluya un Canvas dentro de TimelineView para crear animaciones fotograma a fotograma sin actualizar el estado de 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))
  }
}

Resolución de símbolos

Llame a ctx.resolve() para convertir vistas de SwiftUI, como Image, en símbolos que se puedan dibujar en 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 y cadenas con atributos en Canvas

Dibuje texto mediante ctx.draw(Text(...), at:) para representar etiquetas personalizadas dentro de Canvas.

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

Transformaciones y recorte

Aplique transformaciones afines y trayectorias de recorte al contexto de gráficos para crear efectos complejos.

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

Rendimiento frente a las vistas de SwiftUI

Canvas representa todos los gráficos en un único paso de dibujo; es ideal para sistemas de partículas o gráficos complejos en los que miles de vistas serían demasiado lentos.

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

Accesibilidad en Canvas

VoiceOver no puede ver el contenido de Canvas. Añada etiquetas de accesibilidad mediante el modificador accessibilityChildren.

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

Frecuencia de TimelineView

El contexto proporciona una indicación de cadence (tiempo real, segundos o minutos), para que pueda reducir el nivel de detalle cuando el sistema esté sobrecargado.

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

Comprobación rápida

¿Qué TimelineSchedule hace que TimelineView se vuelva a dibujar en cada fotograma de la animación?

Resumen de la lección

TimelineView vuelve a dibujar el contenido según una programación (en cada fotograma con .animation). Canvas proporciona un contexto de dibujo 2D en modo inmediato. Combínelos para crear efectos de partículas, juegos y gráficos en tiempo real de alto rendimiento, sin la sobrecarga de comparar vistas de SwiftUI en cada fotograma.

Preguntas frecuentes

¿La lección «TimelineView y Canvas para dibujo de alto rendimiento» es gratis?

Sí — el texto completo de «TimelineView y Canvas para dibujo de alto rendimiento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «TimelineView y Canvas para dibujo de alto rendimiento»?

Renderice animaciones en tiempo real con las programaciones de TimelineView y la API Canvas. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Swift Academy?

No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «TimelineView y Canvas para dibujo de alto rendimiento»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Swift Academy?

Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Animaciones implícitas frente a explícitas
  2. matchedGeometryEffect para transiciones hero
  3. AnimatableModifier y Animatable personalizados
  4. TimelineView y Canvas para dibujo de alto rendimiento
← Volver a Swift Academy