Как сделать плавный переход изображения с помощью 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()
            }
        }
    }
}
Другие вопросы по тегам