SwiftUI：水平滚动视图动画+手势

Question

我正在尝试使用水平轮播的图像重新创建展开应用订阅屏幕，这些图像会自动从右向左移动，并启用向右或向左移动的手势，然后动画再次继续。

Unfold App Subscription View

我找到了一种使用 3 个修饰符为水平 ScrollView 设置动画的方法：

• 偏移
• 动画
• 出现

但是当我拖动轮播时，我找不到将 x 坐标更改为我离开的位置的方法。

如果有人知道如何解决这个问题，那将是救命的！

这是我编写的 SwiftUI 代码：

import SwiftUI
import AVKit

struct ContentView: View {
    
    @State var scrollText = false
    
    var body: some View {
        
        ZStack {
            
            VStack {
                Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1))
                .ignoresSafeArea(.all)
            }
            
            VStack {

                VideoPlayer(player: AVPlayer(url: Bundle.main.url(forResource: "wave-1", withExtension: "mp4")!)) {
                    VStack {
                        Image("pro-text")
                            .resizable()
                            .frame(width: 150, height: .infinity)
                            .scaledToFit()
                    }
                }
                .ignoresSafeArea(.all)
                .frame(width: .infinity, height: 300)
                
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 5) {
                        
                        Image("benefit-1")
                            .resizable()
                            .frame(width: 120, height: 120)
                        
                        Image("benefit-2")
                            .resizable()
                            .frame(width: 120, height: 120)
                        
                        Image("benefit-3")
                            .resizable()
                            .frame(width: 120, height: 120)
                        
                        Image("benefit-4")
                            .resizable()
                            .frame(width: 120, height: 120)
                        
                        Image("benefit-5")
                            .resizable()
                            .frame(width: 120, height: 120)
                        
                    }
                    .offset(x: scrollText ? -500 : 20)
                    .animation(Animation.linear(duration: 30).repeatForever(autoreverses: false))
                    .onAppear() {
                        self.scrollText.toggle()
                    }
                }
                
                Spacer()
            }
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

在这里分享我另一篇文章的答案。

因为持续时间似乎还不能与 withAnimation 一起使用，所以我必须有点 hacky 才能获得我想要的动画效果。

这就是我所做的：

1. 我在我的 ScrollView 中添加了一个 ScrollViewReader
2. 我使用 ForEach 并将 ID 添加到我的 ScrollView 中的项目
3. 使用 .offset 和 .animation 修饰符为 ScrollView 本身（不是其中的项目）
4. 使用 .onAppear 中的 .scrollTo 在启动时移动 ScrollView 到离起点较远的项目，以允许用户同时 向后和向前滚动项目，即使 ScrollView 是 本身从右到左动画

我的代码如下所示：

import SwiftUI
import AVKit

struct ProView: View {
    
    @State private var scrollText = false
    
    var body: some View {
        
        ZStack {
            
//            VStack {
//                Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1))
//                    .ignoresSafeArea(.all)
//            }
//            
//            VStack {
//                
//                VideoPlayer(player: AVPlayer(url: Bundle.main.url(forResource: "wave-1", withExtension: "mp4")!)) {
//                    VStack {
//                        Image("pro-text")
//                            .resizable()
//                            .frame(width: 200, height: .infinity)
//                            .scaledToFit()
//                    }
//                }
//                .ignoresSafeArea(.all)
//                .frame(width: .infinity, height: 300)
                
                ScrollView(.horizontal, showsIndicators: false) {
                    
                    ScrollViewReader { value in
                        
                        HStack(spacing: 5) {
                            
                            ForEach(0 ..< 100) { i in
                                
                                HStack {
                                    Image("benefit-1")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-2")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-3")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-4")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-5")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-6")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-7")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-8")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-9")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                    
                                    Image("benefit-10")
                                        .resizable()
                                        .frame(width: 120, height: 120)
                                }
                                .id(i)
                            }
                            
                        }
                        .offset(x: scrollText ? -10000 : 20)
                        .animation(Animation.linear(duration: 300).repeatForever(autoreverses: false))
                        .onAppear() {
                            value.scrollTo(50, anchor: .trailing)
                            scrollText.toggle()
                        }
                    }
                }
                
                Spacer()
            }
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ProView()
    }
}