通过图像数组来回循环_SwiftUI答案

【问题标题】：Loop forth and back through image array _ SwiftUI通过图像数组来回循环_SwiftUI
【发布时间】：2020-06-25 08:22:01
【问题描述】：

我正在尝试用我的应用程序中的 5 张图片制作动画。我想单击显示的图像，然后开始通过数组来回播放的动画，并在第一张图片上再次结束/停止。

到目前为止，我已经得到了这个 - 我从 0 循环到 4，然后它一直在 4 和 3 之间循环。

您有什么想法可以解决吗？

谢谢！

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)
    }
}

【问题讨论】：

我想SwiftUI: Unable to animate images 中提供的方法会对您有所帮助。
谢谢！链接中的解决方案完美！
如果推荐的答案有帮助，那么投票给它是一种很好的 SO 公民做法，因此它对其他成员来说变得更加明显。谢谢。

标签： image loops timer swiftui

【解决方案1】：

你在用于递增activeImageIndex的if语句中似乎有问题：

if self.activeImageIndex != 4 {
    self.activeImageIndex += 1
} else {
    self.activeImageIndex -= 1
}

当activeImageIndex启动成功到4后，会这样运行：

if self.activeImageIndex != 4 4 == 4，因此进入else case self.activeImageIndex -= 1，activeImageIndex 现在是 3。

if self.activeImageIndex != 4 3 != 4，因此进入if 案例self.activeImageIndex += 1，activeImageIndex 现在又是 4。

然后这将永远重复。

【讨论】：

【解决方案2】：

您可以添加私有变量，例如。 _up

..
@State private var _up = true
......

并修改.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
            }
        }
    }

【讨论】：