MatchedGeometryEffect in SwiftUI

Updated:

MatchedGeometryEffect in SwiftUI

The matchedGeometryEffect allows us to animate geometric shapes on the screen and specifically allows us to more on shape into another shape. So how we do it is actually create two different shapes on the screen and then we tell the system that these two shapes are the same shape

struct MatchedGeometryEffectBootCamp: View {
// MARK: -  PROPERTY
@State private var isClicked: Bool = false
@Namespace private var namespace
// MARK: -  BODY
var body: some View {
VStack {
if !isClicked {
  RoundedRectangle(cornerRadius: 25.0)
    .matchedGeometryEffect(id: "rectangle", in: namespace)
    .frame(width: 100, height: 100)
}

Spacer()
if isClicked {
  RoundedRectangle(cornerRadius: 25.0)
    .matchedGeometryEffect(id: "rectangle", in: namespace)
    .frame(width: 300, height: 200)
}

} //: VSTACK
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)
.onTapGesture {
withAnimation(.easeInOut) {
  isClicked.toggle()
}
}
}
}

스크린샷

struct MatchedGeometryEffectExample2: View {

let categories: [String] = ["Home", "Popular", "Saved"]
@State private var selected: String = "Home"
@Namespace private var namespace2

var body: some View {
HStack {
ForEach(categories, id: \.self) { category in
ZStack {
  if selected == category  {
    RoundedRectangle(cornerRadius: 10.0)
      .fill(Color.red)
      .matchedGeometryEffect(id: "category_background", in: namespace2)
      .frame(width: 40, height: 2)
      .offset(y: 20)
  }
  Text(category)
    .foregroundColor(selected == category ? .red : .black)
  }
  .frame(maxWidth: .infinity)
  .frame(height: 55)
  .onTapGesture {
    withAnimation(.spring()) {
      selected = category
    }
  }
} //: LOOP
} //: HSTACK
.padding()
}
}

스크린샷


🗃 Reference

SwiftUI Thinking - https://www.youtube.com/watch?v=Jyh65AMRqzQ&list=PLwvDm4Vfkdphc1LLLjCaEd87BEg07M97y&index=5

Categories:

Updated:

Leave a comment