SwiftUI : @Namespace란? @Namespace 사용법

Sung Daegyu·2024년 1월 28일

`@Namespace` 가 뭐지?

view를 transition할때 애니메이션 효과를 주기 위해 사용하는 property wrapper.

It is commonly used when you want to create smooth transitions between views, especially during navigation or view state changes.

`@namespace`의 특징 및 사용법

@namespace는 matchedGeometryEffect(id:, in:)과 같이 쓰인다.
matchedGeometryEffect의 in:에 들어간 같은 @namespace들끼리 같은 애니메이션을 만든다.
같은 id: 의 경우, 해당 뷰들끼리의 전환(애니메이션)이 일어난다.

코드 예시

import SwiftUI

struct ContentView: View {
    @Namespace private var namespace
    @State private var isFlipped = false

    var body: some View {
        VStack {
            if isFlipped {
                Rectangle()
                    .matchedGeometryEffect(id: "shape", in: namespace)
                    .frame(width: 100, height: 100)
                    .foregroundColor(.blue)
            } else {
                Circle()
                    .matchedGeometryEffect(id: "shape", in: namespace)
                    .frame(maxWidth: .infinity, maxHeight: 400)
                    .foregroundColor(.red)
            }

            Button("Toggle") {
                withAnimation {
                    isFlipped.toggle()
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

id는 한개가 아니라 여러 개를 가질 수 있는데, 이 경우에는 같은 id를 가지는 부분끼리 애니메이션 전환 효과를 가진다. id가 객체 사이의 애니메이션 화살표를 연결해주는 느낌..! → 구체적 예시는 아래.

import SwiftUI
 
struct ContentView: View {
    @State private var isFlipped = false
    @Namespace private var animation
    
    var body: some View {
        HStack {
			      // 'icon' <-> 'icon' 끼리 전환.
						// 'title' <-> 'title' 끼리 전환.
            if isFlipped {
 
                Text("텍스트 입니다.")
                    .font(.subheadline)
                    .matchedGeometryEffect(id: "title", in: animation)
                Image(systemName: "arrow.right")
                    .font(.title2)
                    .matchedGeometryEffect(id: "icon", in: animation)
            } else {
                Image(systemName: "arrow.left")
                    .font(.title2)
                    .matchedGeometryEffect(id: "icon", in: animation)
                Text("텍스트 입니다.")
                    .font(.subheadline)
                    .matchedGeometryEffect(id: "title", in: animation)
               
            }
        }
        .onTapGesture {
            withAnimation {
                isFlipped.toggle()
            }
        }
    }
}