在 SwiftUI 中滑动新图像

Question

SWIFTUI - 动画过渡

我想在单击下一个按钮时从右向左滑动新图像，在单击上一个按钮时从左向右滑动新图像。滑动应该是动画的。这是代码：

import SwiftUI

struct DetailView: View {
    @State private var image: Image?
    @State private var index: Int = 1
    
    var body: some View {
        VStack {
            image?
                .resizable()
                .scaledToFit()
                .transition(.slide)
                .animation(.default)
        }
        .onAppear(perform:loadImage)
        
        Button("Next", action: {
            index += 1
            loadImage()
        })
        
        Button("Previous", action: {
            index -= 1
            loadImage()
        })
    }
    
    
    func loadImage() {
        let strname = String(format: "image%02d", index)
        image = Image (strname)
    }
    
    struct DetailView_Previews: PreviewProvider {
        static var previews: some View {
            DetailView()
        }
    }
}

Answer 1

您可以将一个附加id到image以便每当您更新图像时，SwiftUI 都会看到 2 个不同的视图 \xe2\x80\x94 ，从而实现过渡动画。

\n

编辑：使用move过渡来控制方向。

\n

struct ContentView: View {\n    @State private var image: Image?\n    @State private var index: Int = 1\n    @State private var forwards = false\n\n    var body: some View {\n        VStack {\n            image?\n                .resizable()\n                .scaledToFit()\n                .transition(\n                    .asymmetric(\n                        insertion: .move(edge: forwards ? .trailing : .leading),\n                        removal: .move(edge: forwards ? .leading : .trailing)\n                    )\n                )\n                .id(UUID())\n\n            Button("Next") {\n                index += 1\n                forwards = true\n                withAnimation {\n                    loadImage()\n                }\n            }\n\n            Button("Previous") {\n                index -= 1\n                forwards = false\n                withAnimation {\n                    loadImage()\n                }\n            }\n        }\n        .onAppear(perform: loadImage)\n    }\n\n    func loadImage() {\n        let name = String(format: "image%02d", index)\n        image = Image(name)\n    }\n}\n

\n

结果：

\n\n