Getting started with matched geometry effect in SwiftUI

Matched geometry effect in SwiftUI is a view modifier for creating transition animations between two views. We create two different views, apply the modifier to both of them with a same identifier and namespace, and removing one and inserting another will create an animation where one view moves to the other view’s position. In other words, the view slides from the removed view’s position to the inserted view’s position. Let’s have a look at a concrete example, where we have two rows of views: rectangles and circles. Tapping on any of the views will remove it from one row and insert it into another row. Since we use matchedGeometryEffect view modifier, the change is animated and one view slides to another row.

The view implementation is straight forward. We have a view which renders two rows with ForEach and each row element is a button what has matchedGeometryEffect view modifier applied to. Model items just have an id and colour which is used for setting the foregroundColor. The view model holds two arrays of items, and select methods just remove one item from one array and insert it in another.

	struct ContentView: View {
	@StateObject var viewModel = ViewModel()
	@Namespace var colorSelectionNamespace
	var body: some View {
	VStack {
	HStack {
	ForEach(viewModel.topColors) { item in
	Button(action: { viewModel.selectTopColor(item) }) {
	Rectangle()
	.foregroundColor(item.color)
	.frame(width: 40, height: 40)
	}
	.matchedGeometryEffect(id: item.id, in: colorSelectionNamespace)
	}
	}
	.frame(minHeight: 50)
	Spacer()
	.frame(height: 200)
	HStack {
	ForEach(viewModel.bottomColors) { item in
	Button(action: { viewModel.selectBottomColor(item) }) {
	Circle()
	.foregroundColor(item.color)
	.frame(width: 20, height: 20)
	}
	.matchedGeometryEffect(id: item.id, in: colorSelectionNamespace)
	}
	}
	.frame(minHeight: 50)
	}
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

The view model’s implementation is shown below. Since we want to animate changes, we use withAnimation block and inside the block just remove one item and then insert it to another. Item properties use @Published property wrapper and the view model is ObservableObject, then property changes trigger view refresh. As one view is removed and the other view is inserted, then matchedGeometryEffect will trigger a transition animation where the view moves from one position to another with default fade animation.

	extension ContentView {
	final class ViewModel: ObservableObject {
	@Published var topColors = ColorItem.all
	@Published var bottomColors = [ColorItem]()
	func selectBottomColor(_ item: ColorItem) {
	withAnimation {
	guard let index = bottomColors.firstIndex(of: item) else { return }
	bottomColors.remove(at: index)
	let insertionIndex = (topColors.startIndex…topColors.endIndex).randomElement() ?? 0
	topColors.insert(item, at: insertionIndex)
	}
	}
	func selectTopColor(_ item: ColorItem) {
	withAnimation {
	guard let index = topColors.firstIndex(of: item) else { return }
	topColors.remove(at: index)
	let insertionIndex = (bottomColors.startIndex…bottomColors.endIndex).randomElement() ?? 0
	bottomColors.insert(item, at: insertionIndex)
	}
	}
	}
	}

view raw ViewModel.swift hosted with ❤ by GitHub

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.