0Pricing
Swift Academy · Урок

matchedGeometryEffect для эффектных переходов

Создавайте плавные эффектные анимации между представлениями с пространством имён и совпадающими идентификаторами.

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

Что такое matchedGeometryEffect?

matchedGeometryEffect анимирует положение и размер представления при переходе между двумя состояниями, создавая переход с перемещением элемента.

struct HeroDemo: View {
  @Namespace private var ns
  @State private var expanded = false
  var body: some View {
    if expanded {
      BigCard().matchedGeometryEffect(id: "card", in: ns)
    } else {
      SmallCard().matchedGeometryEffect(id: "card", in: ns)
    }
  }
}

Создание пространства имён

Объявите @Namespace в родительском представлении. Все связанные представления используют это пространство имён.

struct ParentView: View {
  @Namespace private var heroNamespace
}

Применение модификатора

Примените .matchedGeometryEffect(id:in:) с одинаковым id к исходному и целевому представлениям.

Image("cover")
  .matchedGeometryEffect(id: "albumArt", in: heroNamespace)

Запуск перехода

Оберните изменение состояния в withAnimation, чтобы анимировать геометрию между двумя представлениями.

Button("Expand") {
  withAnimation(.spring()) {
    isExpanded.toggle()
  }
}

Переход от списка к подробностям

Классический шаблон перехода: коснитесь элемента списка, и он развернётся в полноэкранное представление с подробностями с помощью matchedGeometryEffect.

ForEach(items) { item in
  ThumbnailRow(item: item)
    .matchedGeometryEffect(id: item.id, in: ns)
    .onTapGesture { withAnimation { selected = item } }
}
if let sel = selected {
  DetailView(item: sel)
    .matchedGeometryEffect(id: sel.id, in: ns)
}

Параметр isSource

Если два представления используют один идентификатор, отметьте исходное представление с помощью isSource: true (по умолчанию), а целевое — с помощью isSource: false.

SmallImage()
  .matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
  .matchedGeometryEffect(id: "img", in: ns, isSource: false)

Точки привязки и свойства размера

Настройте, какая точка привязки и какие свойства геометрии (положение или размер) должны совпадать.

.matchedGeometryEffect(
  id: "box",
  in: ns,
  anchor: .center,
  properties: [.position, .size]
)

Объединение с AnyTransition

Объедините анимацию перехода с .transition, чтобы также управлять появлением содержимого — его затуханием или сдвигом.

DetailView()
  .matchedGeometryEffect(id: "card", in: ns)
  .transition(.opacity)

Несколько переходов в списке

Используйте уникальные идентификаторы, полученные из идентификаторов элементов, чтобы запускать несколько независимых анимаций перехода.

ForEach(products) { p in
  ProductCard(p)
    .matchedGeometryEffect(id: p.id, in: ns)
}

Распространённые ошибки

Два представления с одинаковым идентификатором не должны отображаться одновременно: в каждый момент времени видимым должно быть только одно, иначе возникнут ошибки компоновки.

// Wrong: both views visible at same time
Small().matchedGeometryEffect(id: "x", in: ns)
Large().matchedGeometryEffect(id: "x", in: ns)
// Correct: use if/else or ZStack with opacity toggling

Совет по производительности

Делайте связанные представления лёгкими. Сложные иерархии внутри них могут приводить к пропуску кадров во время анимации.

// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frame

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

Что требуется, чтобы связать два представления как исходное и целевое в переходе с перемещением элемента?

Итоги урока

Создавайте переходы с перемещением элемента с помощью @Namespace и .matchedGeometryEffect(id:in:). Оборачивайте изменения состояния в withAnimation. Следите за тем, чтобы одновременно отображалось только одно связанное представление, иначе возникнут конфликты компоновки.

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

Урок «matchedGeometryEffect для эффектных переходов» бесплатный?

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

Чему я научусь в уроке «matchedGeometryEffect для эффектных переходов»?

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

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

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

Сколько времени занимает урок «matchedGeometryEffect для эффектных переходов»?

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

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

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

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

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