SwiftUI matchedGeometryEffect

效果图：

源码：

import SwiftUI

struct ContentView: View {
    @State var show = false
    @Namespace var namespace
    
    var body: some View {
        ZStack(alignment: .bottom) {
            if !show {
                VStack {
                    HStack(spacing: 16) {
                        RoundedRectangle(cornerRadius: 10)
                            .matchedGeometryEffect(id: "cover", in: namespace)
                            .frame(width: 44)
                        Text("Fever")
                            .matchedGeometryEffect(id: "title", in: namespace)
                        Spacer()
                        Image(systemName: "play.fill")
                            .matchedGeometryEffect(id: "play", in: namespace)
                            .font(.title)
                        Image(systemName: "forward.fill")
                            .matchedGeometryEffect(id: "forward", in: namespace)
                            .font(.title)
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: 44)
                .padding(8)
                .background(
                    RoundedRectangle(cornerRadius: 0)
                        .fill(Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1)))
                        .matchedGeometryEffect(id: "background", in: namespace)
                )
                .frame(maxHeight: .infinity, alignment: .bottom)
            } else {
                VStack(spacing: 20) {
                    RoundedRectangle(cornerRadius: 30)
                        .matchedGeometryEffect(id: "cover", in: namespace)
                        .frame(height: 300)
                        .padding()
                    Text("Fever")
                        .matchedGeometryEffect(id: "title", in: namespace)
                    HStack {
                        Image(systemName: "play.fill")
                            .matchedGeometryEffect(id: "play", in: namespace)
                            .font(.title)
                        Image(systemName: "forward.fill")
                            .matchedGeometryEffect(id: "forward", in: namespace)
                            .font(.title)
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(
                    RoundedRectangle(cornerRadius: 30)
                        .fill(Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1)))
                        .matchedGeometryEffect(id: "background", in: namespace)
                )
                .ignoresSafeArea()
            }
        }
        .foregroundColor(.white)
        .onTapGesture {
            withAnimation(.spring(response: 0.7, dampingFraction: 0.8)) {
                show.toggle()
            }
        }
    }
}

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

.matchedGeometryEffect(id: "forward", in: namespace) 是 SwiftUI 中的一个修饰符，用于创建视图之间的匹配几何效果。让我详细解释这个修饰符的不同部分：

1. matchedGeometryEffect: 这是修饰符的名称，用于在两个视图之间创建匹配几何效果。匹配几何效果是一种 SwiftUI 功能，用于使两个视图在其位置、大小和其他几何属性之间平滑地过渡，以创建吸引人的动画效果。

2. id: "forward": 这是匹配几何效果的标识符。在这里，你可以为匹配几何效果指定一个唯一的字符串标识符，以便 SwiftUI 知道哪些视图应该匹配。通常，你需要确保在不同视图中使用相同的标识符，以便它们之间可以进行匹配。

3. in: namespace: 这是命名空间的名称，用于将匹配几何效果限定在特定的命名空间中。命名空间是一种将匹配几何效果局限于特定视图层次结构部分的方式，以防止意外匹配。在前面的代码示例中，你可以看到 namespace 变量用于创建命名空间，然后在 matchedGeometryEffect 中使用 in: namespace 将匹配几何效果限定在这个命名空间内。

当你在两个视图中使用相同的标识符和相同的命名空间时，.matchedGeometryEffect 会自动处理这些视图之间的过渡动画。它会在这些视图之间平滑地调整位置、大小和其他几何属性，以创建流畅的动画效果，这对于制作吸引人的用户界面非常有用。