Skip to content

Commit

Permalink
feat: text typing animation #14
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuncoffee
yuncoffee committed Mar 30, 2023
1 parent 90b7739 commit e69bb08
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 94 deletions.
38 changes: 2 additions & 36 deletions View/CustomView/CustomText.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,46 +17,12 @@ struct CustomText: View {

var fontSize = 32
var color = CustomColor.scriptColor

@State
var tmpText: String = ""
// @Binding var isStart: Bool

func typeWriter(at position: Int = 0) {
if position == 0 {
tmpText = ""
}
if position < value.count {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
tmpText.append(value[position])
typeWriter(at: position + 1)
}
}
}


var body: some View {
Text(tmpText)
Text(value)
.font(Font.custom("morris9", size: CGFloat(fontSize)))
.lineSpacing(8)
.foregroundColor(color)
.onReceive(globalStore.$scriptCount, perform: {
currentCount in
print("나는 지금 불렸어")
typeWriter()
})

// TypeWriterTextView(
// value,
// speed: 0.1,
// isStart: $isStart
// ).font(Font.custom("morris9", size: CGFloat(fontSize))).lineSpacing(8).foregroundColor(color)

}

}

extension String {
subscript(offset: Int) -> Character {
self[index(startIndex, offsetBy: offset)]
}
}
19 changes: 18 additions & 1 deletion View/SceneView/SceneBackgroundView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,10 @@ struct SceneBackgroundView: View {
}
}


@State
private var isBlinkActive = false


@State
private var isLastScript = false

Expand All @@ -85,6 +88,12 @@ struct SceneBackgroundView: View {
currentBg = .opening
if scriptCount == 3 {
isBlurActive = false
setTimeoutClosure(timeCount: 100) {
isBlinkActive = true
}
}
if scriptCount == 4 {
isBlinkActive = false
}
if scriptCount == 12 {
globalStore.turnOffIsTapAble()
Expand Down Expand Up @@ -196,6 +205,13 @@ struct SceneBackgroundView: View {
var body: some View {
ZStack(alignment: .bottom){

if isBlinkActive {
SequenceBlinkView()
.frame(width: CGFloat(390), height: 650)
.zIndex(100)

}

/**
실제 배경 이미지
*/
Expand All @@ -217,6 +233,7 @@ struct SceneBackgroundView: View {
.frame(width: CGFloat(390), height: 650)
.opacity(isBlurActive ? 1 : 0)
.animation(.easeInOut(duration: 1), value: isBlurActive)

}
.edgesIgnoringSafeArea(.all)
.onReceive(globalStore.$scriptCount, perform: { currentCount in
Expand Down
12 changes: 3 additions & 9 deletions View/SceneView/SequenceView/SequenceBlinkView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,9 @@ struct SequenceBlinkView: View {
currentImageIndex = (currentImageIndex + 1) % introImages.count
}
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
timer.invalidate()
}
timer.invalidate()
}
}
}
}

struct SequenceBlinkView_Previews: PreviewProvider {
static var previews: some View {
SequenceBlinkView()
}
}


105 changes: 66 additions & 39 deletions View/SceneView/SequenceView/SequenceOpeningView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ import SwiftUI
import AVFoundation

struct SequenceOpeningView: View {

@EnvironmentObject
var globalStore: GlobalStore

let audioPlayer = AVPlayer(url: Bundle.main.url(forResource: "sfx_sounds_interaction1", withExtension: "wav")!)
let volume: Float = 1
let playCount = 6
let timeGap: Double = 0.5
@State private var currentPlayCount = 0

let volume: Float = 1
let playCount = 6
let timeGap: Double = 0.5

@State private var currentPlayCount = 0
@State
var isCharcterActive = false
@State
Expand All @@ -25,49 +25,76 @@ struct SequenceOpeningView: View {

private func handleSequenceView(scriptCount: Int) {
switch scriptCount {
case 0:
blackbackground1 = true
case 4:
blackbackground1 = false
crowd = true
case 11:
crowd = false
crowd2 = true
case 12:
crowd2 = false
default:
print("scriptCount", scriptCount)
case 0:
blackbackground1 = true
case 4:
blackbackground1 = false
crowd = true
case 11:
crowd = false
crowd2 = true
case 12:
crowd2 = false
default:
print("scriptCount", scriptCount)
}
}

//var test1 = 0
var isHidden: Bool = false

var body: some View {
ZStack(alignment: .topLeading){
Text("globalStore.scriptCount: \(globalStore.scriptCount)").onAppear {
// Start playing the audio when the view appears
self.audioPlayer.play()
self.audioPlayer.volume = self.volume
let _ = Timer.scheduledTimer(withTimeInterval: self.timeGap + self.audioPlayer.currentItem!.asset.duration.seconds, repeats: true) { timer in
if self.currentPlayCount < self.playCount {
self.audioPlayer.seek(to: CMTime.zero)
self.audioPlayer.volume = self.volume
self.audioPlayer.play()
self.currentPlayCount += 1
} else {
timer.invalidate()
}
}
if self.currentPlayCount < self.playCount {
self.audioPlayer.seek(to: CMTime.zero)
self.audioPlayer.volume = self.volume
self.audioPlayer.play()
self.currentPlayCount += 1
} else {
timer.invalidate()
}
}
}
// if crowd {
// ZStack{
// CharacterView(objectName: walker.name, makeDirection: EnumDirection.Back_2, start: (60.0, 550.0), end: (0.0, 0.0))
// CharacterView(objectName: luna.name, makeDirection: EnumDirection.Back_2, start: (114.0, 560.0), end: (0.0, 0.0))
// CharacterView(objectName: muho.name, makeDirection: EnumDirection.Back_2, start: (168.0, 540.0), end: (0.0, 0.0))
// CharacterView(objectName: coffee.name, makeDirection: EnumDirection.Back_2, start: (222.0, 560.0), end: (0.0, 0.0))
// CharacterView(objectName: olive.name, makeDirection: EnumDirection.Back_2, start: (276.0, 570.0), end: (0.0, 0.0))
// CharacterView(objectName: henry.name, makeDirection: EnumDirection.Back_2, start: (330.0, 540.0), end: (0.0, 0.0))
// }
//
// if blackbackground1 {
// Image("Background_Black")
// .position(x: -100, y: -150)
// }
//
//
// }
// if crowd2 {
// ZStack{
// CharacterView(objectName: walker.name, makeDirection: EnumDirection.Back_1, start: (60.0, 570.0), end: (0.0, -420.0))
// CharacterView(objectName: luna.name, makeDirection: EnumDirection.Back_1, start: (114.0, 600.0), end: (0.0, -450.0))
// CharacterView(objectName: muho.name, makeDirection: EnumDirection.Back_1, start: (168.0, 580.0), end: (0.0, -430.0))
// CharacterView(objectName: coffee.name, makeDirection: EnumDirection.Back_1, start: (222.0, 560.0), end: (0.0, -410.0))
// CharacterView(objectName: olive.name, makeDirection: EnumDirection.Back_1, start: (276.0, 570.0), end: (0.0, -420.0))
// CharacterView(objectName: henry.name, makeDirection: EnumDirection.Back_1, start: (330.0, 540.0), end: (0.0, -390.0))
// }
// }
if crowd {
ZStack{
CharacterView(objectName: walker.name, makeDirection: EnumDirection.Back_2, start: (60.0, 550.0), end: (0.0, 0.0))
CharacterView(objectName: luna.name, makeDirection: EnumDirection.Back_2, start: (114.0, 560.0), end: (0.0, 0.0))
CharacterView(objectName: walker.name, makeDirection: EnumDirection.Back_2, start: (80.0, 550.0), end: (0.0, 0.0))
CharacterView(objectName: luna.name, makeDirection: EnumDirection.Back_2, start: (124.0, 560.0), end: (0.0, 0.0))
CharacterView(objectName: muho.name, makeDirection: EnumDirection.Back_2, start: (168.0, 540.0), end: (0.0, 0.0))
CharacterView(objectName: coffee.name, makeDirection: EnumDirection.Back_2, start: (222.0, 560.0), end: (0.0, 0.0))
CharacterView(objectName: olive.name, makeDirection: EnumDirection.Back_2, start: (276.0, 570.0), end: (0.0, 0.0))
CharacterView(objectName: henry.name, makeDirection: EnumDirection.Back_2, start: (330.0, 540.0), end: (0.0, 0.0))
CharacterView(objectName: olive.name, makeDirection: EnumDirection.Back_2, start: (266.0, 570.0), end: (0.0, 0.0))
CharacterView(objectName: henry.name, makeDirection: EnumDirection.Back_2, start: (310.0, 540.0), end: (0.0, 0.0))
}

if blackbackground1 {
Expand All @@ -79,12 +106,12 @@ struct SequenceOpeningView: View {
}
if crowd2 {
ZStack{
CharacterView(objectName: walker.name, makeDirection: EnumDirection.Back_1, start: (60.0, 570.0), end: (0.0, -420.0))
CharacterView(objectName: luna.name, makeDirection: EnumDirection.Back_1, start: (114.0, 600.0), end: (0.0, -450.0))
CharacterView(objectName: muho.name, makeDirection: EnumDirection.Back_1, start: (168.0, 580.0), end: (0.0, -430.0))
CharacterView(objectName: walker.name, makeDirection: EnumDirection.Back_1, start: (80.0, 550.0), end: (-20.0, -420.0))
CharacterView(objectName: luna.name, makeDirection: EnumDirection.Back_1, start: (124.0, 560.0), end: (-10.0, -400.0))
CharacterView(objectName: muho.name, makeDirection: EnumDirection.Back_1, start: (168.0, 540.0), end: (0.0, -370.0))
CharacterView(objectName: coffee.name, makeDirection: EnumDirection.Back_1, start: (222.0, 560.0), end: (0.0, -410.0))
CharacterView(objectName: olive.name, makeDirection: EnumDirection.Back_1, start: (276.0, 570.0), end: (0.0, -420.0))
CharacterView(objectName: henry.name, makeDirection: EnumDirection.Back_1, start: (330.0, 540.0), end: (0.0, -390.0))
CharacterView(objectName: olive.name, makeDirection: EnumDirection.Back_1, start: (266.0, 570.0), end: (20.0, -400.0))
CharacterView(objectName: henry.name, makeDirection: EnumDirection.Back_1, start: (310.0, 540.0), end: (40.0, -370.0))
}
}
}
Expand Down
39 changes: 30 additions & 9 deletions View/ScriptBoxView/ScriptBoxView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,37 @@ struct ScriptBoxView: View {

@State
var currentSceneCount: Int = 0

//@Binding var isStart: Bool
//@State var isStart: Bool = false


var script: Script
var width: CGFloat

@State
var value = ""

//weak var titleLabel: UILabel!
@State
var tmpText: String = ""

func typeWriter(at position: Int = 0) {
if position == 0 {
tmpText = ""
}
if position < value.count {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.05) {
tmpText.append(value[position])
typeWriter(at: position + 1)
}
}
}

private let SCRIPT_BOX_VIEW_BACKGROUND_IMAGE = "Background_Text"

private func updateCurrentSequence() {
if value.count > tmpText.count {
return
}
if !globalStore.isTapAble{
return
}

if globalStore.scriptCount == globalStore.currentScripts.count - 1 {
currentSceneCount += 1
if currentSceneCount > 4 {
Expand All @@ -63,7 +77,6 @@ struct ScriptBoxView: View {
return _speaker
}


var body: some View {
ZStack(alignment: .topLeading) {
let offset = CGFloat(16)
Expand All @@ -79,7 +92,7 @@ struct ScriptBoxView: View {
VStack(alignment: .leading) {
HStack(spacing: 0){
VStack(alignment: .leading, spacing: 0){
CustomText(value: "\(script.1)")
CustomText(value: "\(tmpText)")
}
.padding(24)
Spacer()
Expand All @@ -93,8 +106,16 @@ struct ScriptBoxView: View {
.background(CustomColor.scriptBox)
.onTapGesture {
updateCurrentSequence()
// isStart = true
}
.onReceive(globalStore.$scriptCount, perform: { currentCount in
value = globalStore.currentScripts[currentCount].1
typeWriter()
})
}
}

extension String {
subscript(offset: Int) -> Character {
self[index(startIndex, offsetBy: offset)]
}
}

0 comments on commit e69bb08

Please sign in to comment.