SwiftUi Animation - 02 Bicycle Arrived anim

gistfile1.md

SwiftUi 자전거 애니메이션

//  Created by Jeff Jeong on 2021/06/16.
//

import Foundation
import SwiftUI

struct BicycleView: View {
    
    @State var moveToRight : Bool = false
    
    // 하늘 그래디언트
    let skyGradient : LinearGradient = LinearGradient(gradient: Gradient(colors: [.white, Color(hex: 0xC0FEFC), Color(hex: 0x3EDBF0), Color(hex: 0x04009A)]), startPoint: .bottom, endPoint: .top)
    
    var body: some View {
        // 지오메트리 리더를 통한 부모뷰의 크기 가져오기
        GeometryReader() { geoProxy in
            // VStack 의 정렬을 moveToRight 의 상태 변경에 따라 변경하기 - 애니메이션 처리
            VStack(alignment: moveToRight ? .trailing : .leading, spacing: 0){
                Spacer()
                Image(systemName: "bicycle")
                    .animation(Animation.easeInOut(duration: 3)
                                .delay(1.3)
                                .repeatForever(autoreverses: false)
                    )
                    .font(.system(size: 40))
                    .background(Color.white)
                Rectangle()
                    .frame(width: geoProxy.size.width, height: geoProxy.size.height / 2)
                    .foregroundColor(Color.green)
            }
            .frame(
                  minWidth: 0,
                  maxWidth: .infinity,
                  minHeight: 0,
                  maxHeight: .infinity
                )
            .background(skyGradient)
            .onAppear(perform: {
                moveToRight.toggle() // 뷰가 그려질때 moveToRight 상태 변경
            })
            .edgesIgnoringSafeArea(.all)
        }
    }
}

// hex 코드를 사용하기 위한 Color Extension
extension Color {
    init(hex: UInt, alpha: Double = 1) {
        self.init(
            .sRGB,
            red: Double((hex >> 16) & 0xff) / 255,
            green: Double((hex >> 08) & 0xff) / 255,
            blue: Double((hex >> 00) & 0xff) / 255,
            opacity: alpha
        )
    }
}

struct BicycleView_Previews: PreviewProvider {
    static var previews: some View {
        BicycleView()
        // previewLayout 으로 미리보기 레이아웃 설정이 가능합니다.
        // sizeThatFits 으로 해당 뷰 크기 만큼 보여줍니다.
        .previewLayout(PreviewLayout.sizeThatFits)
//        .padding()
        // 미리보기 이름을 설정할 수 있습니다.
        .previewDisplayName("알람 뷰")
    }
}