SwiftUI를 이용한 애니메이션 앱 만들기 (1)

SwiftUI의 애니메이션에 대해 다루는 앱.

우선은 앱 기본 세팅 + 2개의 화면을 SwiftUI로 만들어놓기. 그 다음에 애니메이션을 넣음.

맨처음 들어가면 흰색 배경 페이지가 뜨고 리스타트 버튼을 누르면 파란 배경 페이지가 뜬다.

시험 1개 끝난 기념~... 시험 공부하긴 싫고 심심하니깐 SwiftUI나 공부하기~

우선 기본 세팅. AppIcon 적당히 넣어주고 AccentColor랑 Colors 폴더 만들어서 색깔 지정해준다.

그럼 앱의 General 로 가서 화면 회전이 안되게 막아주자. Landscape Left, Landscape Right를 체크해제한다.

ContentView로 가자. 이번에는 @AppStorage를 사용할거임.

@AppStorage("onboarding") var isOnboardingViewActive: Bool = true

그리고 if문을 이용해서 isOnboardingViewActive가 true냐 false냐에 따라 OnboardingView와 HomeView를 보여준다.

OnboardingView 부터 만들어보자. 크게 헤더, 센터, 푸터로 나뉜다. 그리고 이 페이지의 상단에도

@AppStorage("onboarding") var isOnboardingViewActive: Bool = true

를 적어준다. 이미 다른 곳에서 초기화했는데 왜 또 초기화하는거지 궁금할 수 있는데, SwiftUI에서는 isboardingViewActive 값을 만약 찾지 못했을 때는 true로 설정한다는 뜻이다. 오류는 미연에 방지하자...

헤더는 VStack 이용해서 나눔이랑 흰색 작은 글씨 만들어줬다. 여러 줄 정렬할 때는 .multilineTextAlignment 사용한다. 그리고 font 크기 설정하고 싶으면 font(.system(size: 60)) 하면 된다.

센터는 사진 불러와서 .resizable(), .scaledToFit() 하면 된다.
흰색 동그라미는 다른 페이지에서 또 우려먹기 할 거라서 utilities 폴더에서 CircleFroupView를 생성한다.

import SwiftUI

struct CircleGroupView: View {
    // MARK: - PROPERTY
    
    @State var ShapeColor: Color
    @State var ShapeOpacity: Double
    
    // MARK: - BODY
    var body: some View {
        ZStack {
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 40)
                .frame(width: 260, height: 260, alignment: .center)
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 80)
                .frame(width: 260, height: 260, alignment: .center)
        } //: ZSTACK
    }
}

stroke을 이용하면 테두리를 만들 수 있다.

다시 onboardingView로 돌아가서, footer가 제일 까다롭다.

1. 캡슐 배경을 만든다.
2. 시작하기 글씨를 적는다.
3. 빨간색 버튼을 드래그하면 늘어나게 하고 싶기에, 그 배경이 될 빨간색 캡슐을 만든다.
4. 빨간색 버튼을 만든다.

나머진 생략하고... 4번 코드만 보자.

// 4. CIRCLE (DRAGGABLE)
                    HStack {
                        ZStack {
                            Circle()
                                .fill(Color("ColorRed"))
                            Circle()
                                .fill(.black.opacity(0.15))
                                .padding(8)
                            Image(systemName: "chevron.right.2")
                                .font(.system(size: 24, weight: .bold))
                        }
                        .foregroundColor(.white)
                        .frame(width: 80, height: 80, alignment: .center)
                        .onTapGesture {
                            isOnboardingViewActive = false
                        }
                        
                        Spacer()
                    } //: HSTACK

SwiftUI에서 기본으로 지원하는 이미지를 야무지게 써먹음. Image(systemName: "chevron.right.2")를 하면 화살표가 2개가 만들어진다.
추가로 탭을 하면 화면이 전환될 수 있도록 .onTapGesture {
isOnboardingViewActive = false
}를 해줬다.

이제 HomeView를 만들자. 헤더는 따로 없고 센터에 이미지랑 텍스트 띄우고, 푸터에 버튼을 만들어주면 된다. 그리고 버튼을 누르면 화면이 전환되도록 하면 되겠다.

센터에 이미지 넣고, 미리 만들어둔 CircleGroupView()를 호출한다.

텍스트도 넣어준다.

                .font(.title3)
                .fontWeight(.light)
                .foregroundColor(.gray)
                .multilineTextAlignment(.center)
                .padding()

푸터에서 버튼을 만들어주자. SwiftUI에서 지원하는 이미지를 활용한다.

            Button(action: {
                isOnboardingViewActive = true
            }) {
                Image(systemName: "arrow.triangle.2.circlepath.circle.fill")
                    .imageScale(.large)
                
                Text("Restart")
                .font(.system(.title3, design: .rounded))
                .fontWeight(.bold)
            } //: BUTTON
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.capsule)
            .controlSize(.large)

.buttonStyle(.borderedProminent), controlSize(.large) modifier는 처음 써봤다. 여튼 이쁜 버튼이 완성됨 ^.^

참고로 Udemy 강의를 보고 만듦