Как сделать плавный переход изображения с помощью matchedGeometryEffect?
Текст будет плавно переходить слева направо. Изображение также будет плавно переходить слева направо, однако оно решит исчезнуть/исчезнуть. Поскольку это точно такое же изображение, я хочу, чтобы изображение оставалось сплошным и непрозрачным в анимации. Можно ли это осуществить? Или это недостаток в 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()
}
}
}
}
1 ответ
Я смог использовать «хак», чтобы заставить его работать. Каким-то образом использование «удостоверения» по-прежнему будет игнорировать переход, возвращающийся к своему умолчанию по умолчанию, постепенно исчезая и исчезая. Как-то рассказываяasymmetric
точно так же работает. Возможно, у кого-то есть логическое объяснение этому, потому что у меня нет.
extension AnyTransition {
static var identityHack: AnyTransition {
.asymmetric(insertion: .identity, removal: .identity)
}
}
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")
.transition(.identityHack)
.matchedGeometryEffect(id: "icon", in: animation)
} else {
Image("Logo")
.transition(.identityHack)
.matchedGeometryEffect(id: "icon", in: animation)
Text("text")
.font(.subheadline)
.matchedGeometryEffect(id: "title", in: animation)
}
}
.onTapGesture {
withAnimation {
isFlipped.toggle()
}
}
}
}