[SwiftUI] 자연스러운 화면전환 애니메이션 구현하기 (feat. matchedGeometryEffect,Namespace)

안녕하세요 Foma 💻 입니다!

 

평소에 AppStore를 보면 화면 간 전환할 때 자연스러운 애니메이션이 많이 보았는데, '이건 어떻게 구현했을까' 라는 생각이 많이 들어 글을 정리하게 되었습니다.

 

바로 시작할게요~

---

Preview

 

---

@Namespace

 

화면 전환 애니메이션을 구현하기 위해선 @Namespace 프로퍼티 래퍼가 필요합니다.

 

@Namespace는 공식 문서엔 아래와 같이 소개합니다.

 

속성을 포함하는 개체(예: view)의 영구 ID로 정의된 네임스페이스에 대한 액세스를 허용하는 동적 속성 유형입니다.

 

 

간단하게 말하면 객체의 정보를 ID와 함께 기억하고 있는 래퍼입니다.

 

이 ID를 통해서 정보를 다른 뷰와 공유할 수 있으며, 이것을 통해 지오메트리 애니메이션이 가능해 집니다.

 

선언하는 방식은 아래와 같이 @Namespace를 붙여주고 변수의 이름을 정해줍니다.

 

@Namespace var animation(원하는 이름)

---

matchedGeometryEffect

 

matchedGeometryEffect는 원하는 ID와 namespace를 이용하여 특정 뷰에 지오메트리 효과를 부여하는 메서드입니다.

 

 

사용하는 방법은 아래와 같이 원하는 뷰(객체)에 id와 namespace를 함께 적용시켜 줍니다.

 

주의하실 점은 바뀌는 어떤 것의 위에 적용시켜야 합니다.

 

아래 코드에선 화면의 프레임을 바꾸는 것이므로 matchedGeometryEffect를 frame위에 적용했습니다.

 

Image("Highest in the room")
	.resizable()
	.aspectRatio(contentMode: .fill)
	.clipShape(RoundedRectangle(cornerRadius: 15,style: .continuous))
	.matchedGeometryEffect(id: "image", in:animation)
	.frame(width: 150, height: 150)

---

GeometryView

 

본격적으로 화면 전환 애니메이션 코드를 작성해 보도록 하겠습니다.

 

@State 변수를 이용하여 화면 전환 애니메이션을 적용할 수 있는데요.

 

디테일 화면을 보여줄 여부를 판단할 변수를 만들어 줍니다.

 

    @State var detailShow:Bool = false

 

body 부분엔 아래와 같이 detailShow가 true라면 DetailView를 아니라면 아래와 같이 Image를 띄울 수 있도록 합니다.

 

또한 VStack에 onTapGesture를 적용하여 VStack을 눌렀을 때 애니메이션과 함께 detailShow 상태가 true로 변하도록 합니다.

 

    var body: some View {
        VStack {
            if detailShow {
                DetailView()
            }else {
                Image("Highest in the room")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .clipShape(RoundedRectangle(cornerRadius: 15,style: .continuous))
                    .matchedGeometryEffect(id: "image", in:animation)
                    .frame(width: 150, height: 150)
            }
        }
        .onTapGesture {
            withAnimation {
                detailShow = true
            }
        }
    }

---

DetailView

 

@ViewBuilder를 이용해 DetailView를 만들어주고 Image의 크기와 위치를 조정해 줍니다.

 

Image의 좌측 상단에 뒤로 가기 이미지를 배치하고 , 해당 이미지를 누르면 detailShow가 false가 되며 이전 화면으로 되돌아 갈 수 있도록 합니다.

 

    @ViewBuilder
    func DetailView() -> some View {
        VStack {
            Image("Highest in the room")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipShape(RoundedRectangle(cornerRadius: 15,style: .continuous))
                .matchedGeometryEffect(id: "image", in:animation)
                .frame(maxWidth: .infinity, maxHeight: 400)
                .overlay {
                    VStack {
                        Image(systemName: "chevron.left")
                            .font(.title2)
                            .foregroundColor(.black)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(.top,30)
                            .padding(.leading,20)
                            .opacity(detailShow ? 1 : 0)
                            .onTapGesture {
                                withAnimation {
                                    detailShow = false
                                }
                            }
                        Spacer()
                    }
                }
            
            Spacer()
        }
        .ignoresSafeArea(.all)
    }

---

Test

 

아래 GIF와 같이 애니메이션을 탭하면 자연스럽게 디테일 화면으로 이동하게 되고, 디테일 화면에서 "<"를 누르면 이전 화면으로 돌아가게 됩니다.

 

---

오늘은 이렇게 자연스러운 화면 전환 애니메이션을 namespace와 matchedGeometryEffect를 이용하여 구현해 보았습니다.

 

혹시라도 틀린 점이 있거나 궁금하신 점이 있다면 댓글로 알려주세요!