SwiftUI - Changing text as well as showing new string character by character - swift

Question

I have an array of string. I want to display it below manner.
Eg- ["one", "two", "three"]
first one should be displayed character by character
then two then three.
Below code is changing string from one to two and two to three. but not anble to do character by character animation.
struct ContentView: View {
#State var index: Int = 0
var fontColor: String
var displayData: [String]
let timer = Timer.publish(every: 1.5, on: .main, in: .common).autoconnect()
var body: some View {
ZStack {
Text(displayData[safe: index] ?? displayData[0])
.foregroundColor(Color(hex: fontColor))
.font(.uiFont(.subtitle3))
.animation(.linear(duration: 1.0))
}.onReceive(timer) { _ in
if index < displayData.count {
index += 1
} else {
index = 0
}
}
}
}
Can anyone help me to display character one by one when string changes.

Answer 1

Here's possible solution. Each word (one, two, three, etc) is displayed in a
CharacterByCharacter view. This creates its own array of strings for each word passed in, for example ["o", "on", "one"], then displays them one at a time to give the appearance of presenting character-by-character:
struct ContentView: View {
#State private var index = 0
#State private var finished = false
let strings = ["one", "two", "three", "four", "five", "six"]
var longestString: String {
strings.max(by: { $0.count < $1.count }) ?? ""
}
var body: some View {
if finished {
Text("Finished")
.font(.title)
} else {
HStack(spacing: 8) {
ProgressView()
Text(longestString)
.hidden()
.overlay(alignment: .leading) { // Overlay on the hidden longest string to give a fixed frame
CharacterByCharacter(text: strings[index]) {
if index < strings.count - 1 {
index += 1
} else {
finished = true
}
}
}
}
}
}
}
struct CharacterByCharacter: View {
init(text: String, didFinish: #escaping() -> Void) {
var strings = Array(repeating: "", count: text.count)
text.enumerated().forEach { index, c in
(index..<text.count).forEach { strings[$0].append(String(c)) }
}
displayData = strings
self.didFinish = didFinish
}
#State var index: Int = 0
private let displayData: [String]
let didFinish: () -> Void
let timer = Timer.publish(every: 0.2, on: .main, in: .common).autoconnect()
var body: some View {
Text(displayData[index])
.onReceive(timer) { _ in
if index < displayData.count - 1 {
index += 1
} else {
didFinish()
index = 0
timer.upstream.connect().cancel()
}
}
}
}