创建具有移动背景的幻灯片答案

【问题标题】：create a slideshow with moving background创建具有移动背景的幻灯片
【发布时间】：2021-06-05 06:38:45
【问题描述】：

所以我正在开发一个应用程序，我创建了一个如下所示的 spalsh 屏幕：

图片 1

所以图像 1 是我想要的外观，但我想添加一个自动轮播来显示文本，如下面的动画 1 所示：

动画1：

对于图 1，我已经完成了以下代码：

var body: some View {
    GeometryReader { geometry in
        VStack {
           // Text("Hello, World!")
            Spacer().frame(maxWidth: .infinity)
            VStack {
                NavigationLink(destination: 
RegisterLoginView(isLoginScreen: true)) {
                    Spacer(minLength: 100)
                    MyButtonView(stringOfButton: login,
                        isInverse: true,
                        btnHeight: 40)
                        .padding(.leading, 10)
                    Spacer(minLength: 100)

                }
                
                NavigationLink(destination: 
 RegisterLoginView(isLoginScreen: false)) {
                    Spacer(minLength: 100)
                    MyButtonView(stringOfButton: register,
                        isInverse: false,
                        btnHeight: 40)
                        .padding(.leading, 10)
                    Spacer(minLength: 100)
                }
            }
        }
        .frame(maxHeight: .infinity)
    }
    .background(Image("guestBackground")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all))
}

正如您在下面的原始图片中看到的，图片 1 只显示了中间部分。所以我想将图像 1 升级到：

动画 1 的每个视图中间的文本显示在 Image1 上并自动从一个滑动到另一个。只有 3 张幻灯片。
幻灯片 1 的图像右侧，幻灯片 2 的图像中间和幻灯片 3 的图像右侧。就像显示文本时，它看起来就像在背景中，您正在查看公寓内部。

所以看起来你在图像中从左到右移动

有什么想法吗？

【问题讨论】：

这是否回答了您的问题stackoverflow.com/a/62833840/12299030？
@Asperi 并不是因为它已经在做我正在做的事情。我正在寻找自动移动以及每张幻灯片的背景图像，它占资产的 1/3。第一张幻灯片是图像的左侧，第二张幻灯片在中间，第三张幻灯片向右。

标签： ios swift swiftui

【解决方案1】：

为轮播尝试以下方法。它使用 TabView 的 tag() 和 Timer 来自动更改它们从幻灯片 1 到 3 和 3 到 1。至于背景图……

struct ContentView: View {
    @State var slide = 1
    @State var forward = true
    
    var body: some View {
        NavigationView {
            VStack {
                TabView(selection: $slide) {
                    Text("--1--").tag(1)  
                    Text("--2--").tag(2)
                    Text("--3--").tag(3)
                }
                .tabViewStyle(PageTabViewStyle())
                .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            }
        }
        .onAppear {
            Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { timer in
                if forward {
                    slide += 1
                    if slide == 3 { forward = false }
                } else {
                    slide -= 1
                    if slide == 1 { forward = true }
                }
            }
        }
    }
}

【讨论】：