feat: sequence background 작성 #14

MC1-morning-coffee · Mar 30, 2023 · 2674175 · 2674175
1 parent a422101
commit 2674175
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 4 deletions.
diff --git a/View/SceneView/SceneBackgroundView.swift b/View/SceneView/SceneBackgroundView.swift
@@ -0,0 +1,190 @@
+//
+//  SwiftUIView.swift
+//  
+//
+//  Created by Yun Dongbeom on 2023/03/30.
+//
+
+import SwiftUI
+
+enum EnumBackgrundImage: CaseIterable {
+    case opening
+    case sequence1
+    case sequence3
+    case ending
+}
+
+extension EnumBackgrundImage {
+    var srcName: String {
+        switch self {
+        case .opening:
+            return "Background_Image1"
+        case .sequence1:
+            return "Background_Image2"
+        case .sequence3:
+            return "Background_Image3"
+        case .ending:
+            return "Background_Ending"
+        }
+    }
+
+    var imgHeight: Int {
+        switch self {
+        case .opening:
+            return 650
+        case .sequence1, .sequence3:
+            return 2600
+        case .ending:
+            return 2500
+        }
+    }
+}
+
+struct SceneBackgroundView: View {
+
+    @EnvironmentObject
+    var globalStore: GlobalStore
+
+    @State
+    private var isBlurActive = true
+
+    @State
+    var currentBg: EnumBackgrundImage = .opening {
+        didSet {
+            currentSceneHeight = currentBg.imgHeight
+            currentSceneImage = currentBg.srcName
+        }
+    }
+
+    @State
+    private var currentSceneHeight = 0
+
+    @State
+    private var bgOffsetY = 0
+
+    @State
+    private var animationDuration = 3.0
+
+    @State
+    private var currentSceneImage = "" {
+        didSet {
+            print("currentSceneImage is ", currentSceneImage)
+        }
+    }
+
+
+    @State
+    private var isLastScript = false
+
+    func handleCurrentBackground(scriptCount: Int) {
+        switch globalStore.currentScene {
+        case .opeaning:
+            currentBg = .opening
+            if scriptCount == 3 {
+                isBlurActive = false
+            }
+            if scriptCount == 12 {
+                globalStore.turnOffIsTapAble()
+                setTimeoutClosure(timeCount: 400) {
+                    isBlurActive = true
+                }
+                setTimeoutClosure(timeCount: 1000) {
+                    globalStore.turnOnIsTapAble()
+                }
+            }
+        case .sequence1:
+            currentBg = .sequence1
+            if scriptCount == 0 {
+                setTimeoutClosure(timeCount: 400) {
+                    isBlurActive = false
+                }
+            }
+            if scriptCount == 1 {
+                bgOffsetY = 200
+            }
+            if scriptCount == 10 {
+                globalStore.turnOffIsTapAble()
+                setTimeoutClosure(timeCount: 400) {
+                    isBlurActive = true
+                    animationDuration = 0
+                }
+                setTimeoutClosure(timeCount: 500) {
+                    globalStore.turnOffIsFaceViewActive()
+                }
+                setTimeoutClosure(timeCount: 1000) {
+
+                    globalStore.turnOnIsTapAble()
+                }
+            }
+        case .sequence2:
+            if scriptCount == 0 {
+                bgOffsetY = 0
+                globalStore.turnOffIsPopupActive()
+                setTimeoutClosure(timeCount: 400) {
+                    isBlurActive = false
+                    animationDuration = 3.0
+                }
+            }
+
+            if scriptCount == 3 {
+                globalStore.turnOnIsPopupActive()
+            }
+
+        case .sequence3:
+            currentBg = .sequence3
+            if scriptCount == 0 {
+                bgOffsetY = 0
+            }
+        case .ending:
+            currentBg = .ending
+            if scriptCount == 0 {
+                bgOffsetY = 0
+                setTimeoutClosure(timeCount: 100) {
+                    globalStore.turnOffIsTapAble()
+                    animationDuration = 12
+                    bgOffsetY = 2500 - 650
+                }
+                setTimeoutClosure(timeCount: 12000) {
+                    globalStore.turnOnIsTapAble()
+                }
+            }
+            if scriptCount == 6 {
+                isBlurActive = true
+            }
+            if scriptCount == 7 {
+                isLastScript = true
+            }
+        }
+    }
+
+    var body: some View {
+        ZStack(alignment: .bottom){
+
+            /**
+             실제 배경 이미지
+             */
+            Image(currentSceneImage)
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .frame(width: 390, height: 650, alignment: .bottom)
+                    .offset(y: CGFloat(bgOffsetY))
+                    .animation(.linear(duration: animationDuration), value: bgOffsetY)
+                    .alignmentGuide(.bottom) { d in
+                          d[.bottom]
+                      }
+            /**
+             가려지는 레이어
+             */
+            Rectangle()
+                .zIndex(100)
+                .background(isLastScript ? Color.white : Color.black)
+                .frame(width: CGFloat(390), height: 650)
+                .opacity(isBlurActive ?  1 : 0)
+                .animation(.easeInOut(duration: 1), value: isBlurActive)
+        }
+        .edgesIgnoringSafeArea(.all)
+        .onReceive(globalStore.$scriptCount, perform: { currentCount in
+            handleCurrentBackground(scriptCount: currentCount)
+        })
+    }
+}
diff --git a/View/SceneView/SceneView.swift b/View/SceneView/SceneView.swift
@@ -61,11 +61,13 @@ struct SceneView: View {
             let deviceHeight = geo.size.height
             ZStack(alignment: .topLeading) {
                 // SequenceViewContainer
+                SceneBackgroundView()
+                    .frame(width: deviceWidth, height: deviceHeight)
+                    .border(.orange)
                 HStack {
                     AnyView(setSequenceView(currentScene: globalStore.currentScene))
                 }
                 .frame(width: deviceWidth, height: deviceHeight)
-                .background(Color.green)
                 if globalStore.isPopupActive {
                     DetailPopupView()
                         .position(x: deviceWidth / 2, y: deviceHeight / 2)

diff --git a/View/SceneView/SequenceView/SequenceThreeView.swift b/View/SceneView/SequenceView/SequenceThreeView.swift
@@ -14,20 +14,20 @@ struct SequenceThreeView: View {
 
     @State
     var isPaddleBtnActive = false
-
     /**
      sample
      */
     private func handleSequenceView(scriptCount: Int) {
         switch scriptCount {
             case 19:
                 isPaddleBtnActive = true
-//            case 20:
-//                isPaddleBtnActive = false
+            case 20:
+                isPaddleBtnActive = false
             default:
                 print("scriptCount", scriptCount)
         }
     }
+
     var body: some View {
         ZStack(alignment: .topLeading){
             Text("globalStore.scriptCount: \(globalStore.scriptCount)")