I am trying to animate an image to full screen from a row in a list and then animate back when I dismiss it. I am trying .matchedGeometryEffect but there are two big problems.
Firstly there is no animation when dismissing.
Secondly, if you first press the row to navigate to the pushed view then come back and try to press the image, it very oddly animates in reverse.
struct ContentView: View {
@Namespace private var animation
@State var showFullScreen = false
var body: some View {
NavigationView {
ZStack {
List {
NavigationLink {
Text("Hello World")
} label: {
Button {
withAnimation {
showFullScreen = true
}
} label: {
Image(uiImage: UIImage(named: "image") ?? UIImage())
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.matchedGeometryEffect(id: "ident", in: animation)
}
.buttonStyle(PlainButtonStyle())
}
.padding()
}
if showFullScreen {
Image(uiImage: UIImage(named: "image") ?? UIImage())
.resizable()
.aspectRatio(contentMode: .fit)
.matchedGeometryEffect(id: "ident", in: animation)
}
}
.navigationTitle("Geometry Test")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
withAnimation {
showFullScreen = false
}
} label: {
Text("Dismiss")
}
}
}
}
}
}