[SwiftUI-기초] custom transition

• 커스텀한 View Modifier 를 만드는 것과 방법이 대동소이하다.
• 다만, 우리가 만드려는 것은 .transition() 안에 들어가는 .scale, .opacity 같은 전환 옵션을 만들어보려고 한다.
• 참조링크 : 2022.10.15 - [분류 전체보기] - [SwiftUI-기초] Custom modifier

struct CornerRotateModifier: ViewModifier {
    let amount: Double
    let anchor: UnitPoint

    func body(content: Content) -> some View {
        content
            .rotationEffect(.degrees(amount), anchor: anchor)
            .clipped()
    }
}

• amount: 얼마만큼 회전할 지 정도를 정함
• anchor: 어느 축을 기준으로 회전할지 정함
• 이대로 써도 되나, extension 으로 확장해서 좀더 간편하게 사용할 수 있도록 해봄
• .rotationEffect: 3d 와 거의 비슷한데, Z축을 기준으로 회전하는 것, 또한 어느 축을 기준으로 회전할지 잡을 수 있다.
• .clipped(): 이것은 원본 사각형이외에는 보여주지 않겠다는 뜻이다. 코드를 다 만들고 이 부분만 주석처리 해보면 이해가 쉽다.

extension AnyTransition {
    static var pivot: AnyTransition {
        .modifier(
            active: CornerRotateModifier(amount: -90, anchor: .topLeading),
            identity: CornerRotateModifier(amount: 0, anchor: .topLeading)
        )
    }
}


....
.transition(.pivot)

아래와 같이 사용할 수도 있다.

예제 코드

struct ContentView: View {
    @State private var isShowingRed = false

    var body: some View {
        ZStack {
            Rectangle()
                .fill(.blue)
                .frame(width: 200, height: 200)

            if isShowingRed {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 200)
                    .transition(.pivot)
            }
        }
        .onTapGesture {
            withAnimation {
                isShowingRed.toggle()
            }
        }
    }
}