0Pricing
Swift Academy · Урок

TimelineView и Canvas для высокопроизводительной отрисовки

Создавайте анимации в реальном времени с расписаниями TimelineView и API Canvas.

«TimelineView и Canvas для высокопроизводительной отрисовки» — бесплатный урок Swift Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Swift Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Swift Academy содержит 4 уроков всего.

Обзор TimelineView

TimelineView перерисовывает содержимое по расписанию, обеспечивая анимацию в реальном времени без таймеров.

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

Типы TimelineSchedule

Встроенные расписания: .animation (каждый кадр), .periodic (через фиксированный интервал), .explicit (в определённые даты).

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

Обзор Canvas

Canvas предоставляет двумерный контекст рисования для высокопроизводительной графики в режиме немедленной отрисовки, подобной Core Graphics.

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

Рисование фигур в Canvas

Используйте методы GraphicsContext, такие как fill, stroke и draw, чтобы отображать контуры и изображения.

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 и Canvas

Поместите Canvas внутрь TimelineView для покадровой анимации без обновления состояния 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))
  }
}

Разрешение символов

Вызовите ctx.resolve(), чтобы преобразовать представления SwiftUI, например Image, в отрисовываемые символы для 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")
}

Текст и атрибутированные строки в Canvas

Рисуйте текст с помощью ctx.draw(Text(...), at:), чтобы создавать пользовательские подписи внутри Canvas.

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

Преобразования и обрезка

Применяйте аффинные преобразования и контуры обрезки к графическому контексту для создания сложных эффектов.

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

Производительность по сравнению с представлениями SwiftUI

Canvas отображает всю графику за один проход рисования — это идеально для систем частиц или сложных диаграмм, где тысячи представлений работали бы слишком медленно.

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

Специальные возможности в Canvas

Содержимое Canvas невидимо для VoiceOver. Добавляйте подписи специальных возможностей с помощью модификатора accessibilityChildren.

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

Частота обновления TimelineView

Контекст предоставляет подсказку cadence (в реальном времени, секунды, минуты), чтобы можно было уменьшить детализацию при высокой нагрузке на систему.

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

Проверка знаний

Какой TimelineSchedule заставляет TimelineView перерисовываться на каждом кадре анимации?

Итоги урока

TimelineView перерисовывает содержимое по расписанию (на каждом кадре с .animation). Canvas предоставляет двумерный контекст рисования в режиме немедленной отрисовки. Объединяйте их для создания высокопроизводительных эффектов частиц, игр и графиков в реальном времени без затрат на сравнение представлений SwiftUI на каждом кадре.

Часто задаваемые вопросы

Урок «TimelineView и Canvas для высокопроизводительной отрисовки» бесплатный?

Да — полный текст урока «TimelineView и Canvas для высокопроизводительной отрисовки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Swift Academy, подпишись на CoddyKit PRO. Курс Swift Academy содержит 4 уроков всего.

Чему я научусь в уроке «TimelineView и Canvas для высокопроизводительной отрисовки»?

Создавайте анимации в реальном времени с расписаниями TimelineView и API Canvas. Ты практикуешь Swift Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Swift Academy?

Предыдущий опыт не требуется. Swift Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «TimelineView и Canvas для высокопроизводительной отрисовки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Swift Academy?

Да. Каждый урок Swift Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Неявные и явные анимации
  2. matchedGeometryEffect для эффектных переходов
  3. Пользовательские AnimatableModifier и Animatable
  4. TimelineView и Canvas для высокопроизводительной отрисовки
← Назад к Swift Academy