The text will transition smoothly from left to right. The image will also transition smoothly from left to right, however it decides to fade out/fade in. Because it is the exact same image, I want the image to stay solid and not transparent in the animation. Can this be accomplished? Or is this a flaw in matchedGeometryEffect?
struct MainView: View {
@Namespace private var animation
@State private var isFlipped = false
var body: some View {
HStack {
if isFlipped {
Text("text")
.font(.subheadline)
.matchedGeometryEffect(id: "title", in: animation)
Image("Logo")
.matchedGeometryEffect(id: "icon", in: animation)
} else {
Image("Logo")
.matchedGeometryEffect(id: "icon", in: animation)
Text("text")
.font(.subheadline)
.matchedGeometryEffect(id: "title", in: animation)
}
}
.onTapGesture {
withAnimation {
isFlipped.toggle()
}
}
}
}
I was able to use a "hack" to make it work. Somehow using 'identity' will still ignore the transition falling back to its default fading the views in and out. Somehow telling the
asymmetric
to the exact same thing does work. Perhaps someone has a logical explanation for this, cause I don't.