SwiftUI - Spring Animation

오늘은 SwiftUI에 Animation을 사용해보려 합니다.

먼저 isZoomed @State프로퍼티를 만들어줍니다.
디폴트 값은 false로 해주고 scrollView가 onAppear 되는 시점
애니메이션이 실행되고 isZoomed값도 토글됩니다.

banner의 높이를 결정지을 bannerHeight변수는 isZoomed 값에 따라 253이 되거나 0이 됩니다.
frame에 height로 바로 사용하기 위해 타입은 Double(CGFloat)로 선언해줍니다.

이게 끝

struct ContentView: View {
    @State private var isZoomed: Bool = false
    
    var bannerHeight: Double {
        isZoomed ? 253 : 0
    }
    
    var body: some View {
        ScrollView {
            banner
        }.onAppear {
            withAnimation(.spring()) {
                isZoomed.toggle()
            }
        }
    }
    
    var banner: some View {
        VStack {
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.black)
                .frame(maxWidth: .infinity, minHeight: 80)
                .overlay(
                    VStack(spacing: 16) {
                        VStack(spacing: 24) {
                            Text("스유? \n 모르겠다")
                                .foregroundColor(.gray)
                                .multilineTextAlignment(.center)
                            Button {
                                
                            } label: {
                                RoundedRectangle(cornerRadius: 8)
                                    .frame(height: 50)
                                    .frame(maxWidth: .infinity, alignment: .center)
                                    .padding(.all, 14)
                                    .overlay(
                                        Text("스유 어렵다")
                                            .foregroundColor(.white)
                                    )
                            }
                        }
                    }
                )
        }
        .frame(height: bannerHeight)
        .padding(.horizontal)
    }
}

실행하면 아래와 같이 0에서 253까지 확장되는 애니메이션을 확인할 수 있습니다.

uikit이었으면 height constraint를 변수로 가지고 있고
UIView.animate내부에서 constraint값을 0에서 253만큼 줬을 것 같은데
SwftiUI로 하니까 UIKit보다는 조금 간단하게? 처리할 수 있네요.

 

https://developer.apple.com/documentation/swiftui/withanimation(_:_:)