[SwiftUI] View -> Flip 기능

 

 

✅ 뷰를 전환시키는 애니메이션인 Flip 기능

 

 

 

1. MainView

import SwiftUI

struct ContentView: View {
    
    @State var isFlipped = false
    
    var body: some View {
        VStack(spacing: 0) {
            ZStack {
                if isFlipped {
                    FrontView()
                } else {
                    BackView()
                }
            }
            .scaleEffect(x: isFlipped ? -1 : 1)
            .frame(width: 200, height: 300)
            .rotation3DEffect(.degrees(isFlipped ? 180 : 0), axis: (x: 0, y: -1, z: 0))
            .animation(.easeInOut(duration: 0.6), value: isFlipped)
            .onTapGesture {
                isFlipped.toggle()
            }
            .frame(width: 329, height: 480)
            
        }
    }
}

180도가 돌때마다, 보여줄 2개의 뷰를 ZStack안에 두고, 

Flip의 경우를 Bool변수로 두고, 이 변수에 따라 보여줄 뷰를 작성해주면 된다.

 

2. FrontView 

import SwiftUI

struct FrontView: View {
    var body: some View {
        ZStack{
            Rectangle()
                .fill(.blue)
                .cornerRadius(10)
            
            Text("앞의 화면🎁")
                .bold()
        }
        .frame(width: 200, height: 300)
    }
}

앞의 화면을 보여줄 Front View.

그리고 이 뷰를 터치하면, OnTapGesture에 의해 토글이 작동하고

화면 전환이 이루어진다.

 

3. BackView

import SwiftUI

struct BackView: View {
    var body: some View {
        ZStack{
            Rectangle()
                .fill(.green)
                .cornerRadius(10)
            
            Text("뒤의 화면🎁")
                .bold()
        }
        .frame(width: 200, height: 300)
    }
}

 

[ 결과 화면 ]