Sliding new image in SwiftUI - animation

Question

SWIFTUI - ANIMATED TRANSITIONS
I want to slide a new image from right to left when I click the next button and from left to right when I click the previous button. The sliding should be animated. Here is the code:
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

You can attach an id to the image so that whenever you update the image, SwiftUI sees 2 different views — making it animate the transition.
Edit: use the move transition to control direction.
struct ContentView: 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)
)
)
.id(UUID())
Button("Next") {
index += 1
forwards = true
withAnimation {
loadImage()
}
}
Button("Previous") {
index -= 1
forwards = false
withAnimation {
loadImage()
}
}
}
.onAppear(perform: loadImage)
}
func loadImage() {
let name = String(format: "image%02d", index)
image = Image(name)
}
}
Result: