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

Question

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

展开应用订阅视图

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

• 抵消
• animation
• 出现

但是当我拖动旋转木马时，我找不到将 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 才能获得我想要的 animation 效果。

这是我所做的：

1. 我在 ScrollView 中添加了一个 ScrollViewReader
2. 我使用 ForEach 并将 ID 添加到我的 ScrollView 中的项目
3. 使用 an.offset 和 .animation 修饰符为 ScrollView 本身（而不是其中的项目）设置动画
4. used.scrollTo inside.onAppear 在启动时将 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()
    }
}