Loop forth and back through image array _ SwiftUI - image

Question

I'm trying to make an animation from 5 pictures in my App. I want to click on a displayed Image and then start the animation that goes forth and back through array and ends/stops again on the first picture.
So far I've got this - I loop from 0 to 4 and then it just keep looping between 4 & 3.
Do you have any ideas how could I fix it?
Thanks!
struct ContentView: View {
#State private var activeImageIndex = 0
#State private var startTimer = false
let timer = Timer.publish(every: 0.15, on: .main, in: .common).autoconnect()
let myShots = ["MuscleUp1", "MuscleUp2", "MuscleUp3", "MuscleUp4", "MuscleUp5"]
var body: some View {
VStack {
Image(self.myShots[self.activeImageIndex])
.resizable()
.aspectRatio(contentMode: .fit)
.onReceive(self.timer) { time in
if self.startTimer {
if self.activeImageIndex != 4 {
self.activeImageIndex += 1
} else {
self.activeImageIndex -= 1
}
}
}
.onTapGesture {
self.startTimer.toggle()
}
}
.background(Color.blue)
}
}

Answer 1

You seem to have a problem in the if statement used to increment activeImageIndex:
if self.activeImageIndex != 4 {
self.activeImageIndex += 1
} else {
self.activeImageIndex -= 1
}
When activeImageIndex starts and successfully goes to 4, it will then run like this:
if self.activeImageIndex != 4 4 == 4, therefore enters the else case self.activeImageIndex -= 1, activeImageIndex is now 3.
if self.activeImageIndex != 4 3 != 4, therefore enters the if case self.activeImageIndex += 1, activeImageIndex is now 4 again.
Then this repeats forever.

Answer 2

You can add private var eg. _up
..
#State private var _up = true
......
and modify .onReceive
.onReceive(self.timer) { time in
if self.startTimer {
if self.activeImageIndex != 4 && self._up {
self.activeImageIndex += 1
if self.activeImageIndex == 4 {
self._up = false
}
} else {
self.activeImageIndex -= 1
if self.activeImageIndex == 0 {
self._up = true
}
}
}