matchedGeometryEffect — модификатор SwiftUI, который позволяет двум разным View анимироваться так, будто это один и тот же элемент, плавно переходящий из одного состояния в другое.
Это создаёт ощущение визуальной связности и помогает пользователю понимать, что он продолжает взаимодействовать с тем же объектом.
🔍 Где реально полезно использовать?
- уменьшенное изображение → полноэкранное отображение (изображение как бы «расправляется» в большой размер)
- список → экран деталей (карточка из списка переезжает в новую позицию, а не пропадает и появляется заново)
- cворачивание / разворачивание элементов (например, компактный блок превращается в полноценный контейнер)
(Примеры анимаций можно посмотреть в оригинальной статье)
🛠 Как это работает:
@Namespace private var namespace
@State private var expanded = false
var body: some View {
VStack {
if expanded {
itemExpanded
.matchedGeometryEffect(id: "card", in: namespace)
} else {
item
.matchedGeometryEffect(id: "card", in: namespace)
}
}
.onTapGesture {
withAnimation(.spring()) {
expanded.toggle()
}
}
}
Два разных View получают одинаковый id и одно пространство имён.
SwiftUI сам строит между ними плавный переход.
🍕 Что стоит учитывать в 2025:
Этот эффект не анимирует всё подряд. Цвет, прозрачность и скругления могут «перепрыгивать», если их не анимировать отдельно.
Если два состояния слишком разные по структуре, анимация может выглядеть странно.
В больших списках и сложных layout’ах matchedGeometryEffect иногда тяжелеет, так что лучше использовать точечно.
✔️ Когда использовать:
- нужно показать связь между двумя состояниями одного и того же элемента
- важна плавность и понятный переход
❌ Когда проще обойтись без него:
- если нужен обычный fade или scale
- если это два разных view без смысла связывать их визуально
- если layout очень сложный и тяжёлый
🔗 Оригинальная статья
👏
#R #SwiftUI #matchedGeometryEffect #модификаторы