animation - 在 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 个不同的图像。这使得过渡动画化。

编辑:使用move 转换来控制方向。

struct DetailView: View {
    @State private var image: Image?
    @State private var index: Int = 1
    @State private var forwards = false

    var body: some View {
        VStack {
            image?
                .resizable()
                .scaledToFit()
                .transition(
                    .asymmetric(
                        insertion: .move(edge: forwards ? .trailing : .leading),
                        removal: .move(edge: forwards ? .leading : .trailing)
                    )
                )
                .animation(.default)
                .id(UUID())
        }
        .onAppear(perform:loadImage)

        Button("Next", action: {
            index += 1
            forwards = true
            loadImage()
        })

        Button("Previous", action: {
            index -= 1
            forwards = false
            loadImage()
        })
    }

    func loadImage() {
        let strname = String(format: "image%02d", index)
        image = Image(strname)
    }
}

结果: