25. [SwiftUI] Transition

오!

 

기존 뷰 계층에 이미 존재하는 뷰가 아니라, 새로 추가되는 경우 사용

아래 예시코드는 Bool값에 따라 뷰가 새로 그려지고, 사라지고 하는 경우이다. -> transition 사용!

(항상 뷰 계층에 존재하는 상황이 아님) 

 

//  Created by Toughie on 2023/04/23.
//


import SwiftUI

struct Transitions: View {
    
    @State var showView: Bool = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Button("Button") {
                    showView.toggle()
                }
                .padding()
                Spacer()
            }
            
            if showView {
                RoundedRectangle(cornerRadius: 30)
                    .fill(Color.blue)
                    .frame(height: UIScreen.main.bounds.height * 0.5)
                //좌측에서 우측으로 슬라이드
                    .transition(.slide)
                //trailing에서 나와서 다시 trailing쪽으로
                    .transition(.move(edge: .trailing))
                //bottom에서 올라왔다가 다시 bottom쪽으로
                    .transition(.move(edge: .bottom))
                //커졌다가 작아졌다가
                    .transition(AnyTransition.scale.animation(.easeInOut))
                //스르륵 하고 opacity 조절
                    .transition(AnyTransition.opacity.animation(.easeInOut))
                //등장과 소멸 다르게 설정 가능
                    .transition(.asymmetric(
                        insertion: .move(edge: .leading),
                        removal: .move(edge: .bottom)
                    ))
                //transition은 애니메이션과 함께 써야함
                    .animation(.spring(), value: showView)
            }
        }
        //ZStack 자체에도 애니메이션 걸어줌
        .animation(.default, value: showView)
        .edgesIgnoringSafeArea(.bottom)
    }
}

//프리뷰 캔버스에 에러가 있는듯 하여, 아래와 같이 처리하면 정상적으로 확인 가능
struct Transitions_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            Transitions()
        }
    }
}

animation, transition의 차이를 이해하고 

적절히 조합해서 사용하면 멋진 화면을 만들 수 있을 것 같다 !