同时匹配几何效果和旋转3D效果

Question

我想要制作一张卡片的动画，它从屏幕的上半部分飞到下半部分，并在飞行过程中翻转。

我使用自定义 .cardify 修饰符控制翻转逻辑。它似乎单独工作，例如，当我通过 onTapGesture { withAnimation { ... } } 翻转卡片时。

我还使用 matchedGeometryEffect 制作了一张卡片从屏幕顶部飞到底部，反之亦然。

但是，当我点击卡片时，它会在不旋转的情况下飞行。

我尝试对两个 if 分支应用 .transition(.assymetric(...)) （参见下面的代码）但这没有帮助。

那么，代码

import SwiftUI

struct ContentView: View {
    @State var cardOnTop = true
    @State var theCard = Card(isFaceUp: true)

    @Namespace private var animationNameSpace
    
    var body: some View {
        VStack {
            if cardOnTop {
                CardView(card: theCard)
                    .matchedGeometryEffect(id: 1, in: animationNameSpace)
                    .onTapGesture {
                        withAnimation {
                            theCard.toggle()
                            cardOnTop.toggle()  // comment me to test flipping alone
                        }
                    }
                Color.white
            } else {
                Color.white
                CardView(card: theCard)
                    .matchedGeometryEffect(id: 1, in: animationNameSpace)
                    .onTapGesture {
                        withAnimation {
                            theCard.toggle()
                            cardOnTop.toggle()
                        }
                    }
            }
        }
        .padding()
    }

    struct Card {
        var isFaceUp: Bool
        
        mutating func toggle() {
            isFaceUp.toggle()
        }
    }
    
    struct CardView: View {
        var card: Card

        var body: some View {
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundColor(.red)
                .cardify(isFaceUp: card.isFaceUp)
        }
    }
}

/* Cardify ViewModifier */

struct Cardify: ViewModifier, Animatable {
    init(isFaceUp: Bool){
        rotation = isFaceUp ? 0 : 180
    }
    
    var rotation: Double  // in degrees

    var animatableData: Double {
        get { return rotation }
        set { rotation = newValue }
    }
    
    func body(content: Content) -> some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: DrawingConstants.cornerRadius)
            if rotation < 90 {
                shape.fill().foregroundColor(.white)
                shape.strokeBorder(lineWidth: DrawingConstants.lineWidth).foregroundColor(.gray)
            } else {
                shape.fill().foregroundColor(.gray)
            }
            
            content
                .opacity(rotation < 90 ? 1 : 0)
        }
        .rotation3DEffect(Angle.degrees(rotation), axis: (0, 1, 0))
    }
    
    private struct DrawingConstants {
        static let cornerRadius: CGFloat = 15
        static let lineWidth: CGFloat = 2
    }
}

extension View {
    func cardify(isFaceUp: Bool) -> some View {
        return self.modifier(Cardify(isFaceUp: isFaceUp))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

如何使卡片旋转飞行？

另外，我发现这是可行的（如果单独放入VStack主体中，则没有if分支）

CardView(card: theCard)
    .offset(x: 0, y: cardOnTop ? 0 : 100)
    .onTapGesture {
        withAnimation {
            theCard.toggle()
            cardOnTop.toggle()  // comment me to test flipping alone
        }
    }

但在我的应用程序中，我有一副向下翻转的卡片，这些卡片被分配给向上翻转的棋盘。我尝试通过上面 ContentView 代码中的 if-branch 来模拟行为（CardView 出现和消失）。

Answer 1

这是一个纯粹使用 .transition 使用自定义过渡的解决方案：

struct ContentView: View {
    @State var cardOnTop = true
    
    var body: some View {
        VStack(spacing:0) {
            if cardOnTop {
                RoundedRectangle(cornerRadius: 15)
                    .fill(.blue)
                    .transition(.rotate3D(direction: 1).combined(with: .move(edge: .bottom)))
                Color.clear
            } else {
                Color.clear
                RoundedRectangle(cornerRadius: 15)
                    .fill(.green)
                    .transition(.rotate3D(direction: -1).combined(with: .move(edge: .top)))
            }
        }
        .onTapGesture {
            withAnimation(.easeInOut(duration: 2)) {
                cardOnTop.toggle()
            }
        }
        .padding()
    }
}

/* Transition Modifier */

extension AnyTransition {
    static func rotate3D(direction: Double) -> AnyTransition {
        AnyTransition.modifier(
            active: Rotate3DModifier(value: 1, direction: direction),
            identity: Rotate3DModifier(value: 0, direction: direction))
    }
}

struct Rotate3DModifier: ViewModifier {
    let value: Double
    let direction: Double
    
    func body(content: Content) -> some View {
        content
            .rotation3DEffect(Angle(degrees: 180 * value * direction), axis: (x: 0, y: 1, z: 0))
            .opacity(1 - value)
    }
}

Answer 2

由于您移除了该卡并将另一张卡插入到视图中，因此不会触发旋转，因此仅保留 .matchedGeometryEffect。

您想要的是一张卡片留在视野中，以便它可以旋转，但也可以改变其位置。

您可以使用 .offset 来实现这一点。 GeometryReader 只是为了找到正确的偏移值。

var body: some View {
    GeometryReader { geo in
        VStack {
            CardView(card: theCard)
                .offset(x: 0, y: cardOnTop ? 0 : geo.size.height / 2)
                .onTapGesture {
                    withAnimation {
                        cardOnTop.toggle() 
                        theCard.toggle()
                    }
                }
            Color.clear
        }
    }
    .padding()
}