From 26741751648f8601a990bf7cbbfc42df3dc9ad90 Mon Sep 17 00:00:00 2001 From: yuncoffee Date: Thu, 30 Mar 2023 20:57:52 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20sequence=20background=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20#14?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- View/SceneView/SceneBackgroundView.swift | 190 ++++++++++++++++++ View/SceneView/SceneView.swift | 4 +- .../SequenceView/SequenceThreeView.swift | 6 +- 3 files changed, 196 insertions(+), 4 deletions(-) create mode 100644 View/SceneView/SceneBackgroundView.swift diff --git a/View/SceneView/SceneBackgroundView.swift b/View/SceneView/SceneBackgroundView.swift new file mode 100644 index 0000000..4b3fc83 --- /dev/null +++ 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 index 1cb8190..cf197f9 100644 --- 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 index 0bd656e..61e92bf 100644 --- a/View/SceneView/SequenceView/SequenceThreeView.swift +++ b/View/SceneView/SequenceView/SequenceThreeView.swift @@ -14,7 +14,6 @@ struct SequenceThreeView: View { @State var isPaddleBtnActive = false - /** sample */ @@ -22,12 +21,13 @@ struct SequenceThreeView: View { 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)")