Is it possible to have matched geometry effect follow a path? I noticed when you launch Netflix's mobile app and select a profile from the who's watching screen, the profile square scales up and centers, then it animates upwards and to the right into a mini profile square. This seems like a matched geometry effect but along a curved path instead of a straight line. I could not find anything in the matched geometry api apart from frame, size and position to achieve this effect.

有没有可能让匹配的几何体效果跟随一条路径？我注意到，当你启动Netflix的移动应用程序，并从谁的观看屏幕上选择一个个人资料时，个人资料方块会放大并居中，然后它会向上和向右动画显示为一个迷你个人资料方块。这看起来像是匹配的几何体效果，但沿着曲线路径而不是直线。除了框架、大小和位置之外，我在匹配的几何API中找不到任何东西来实现这种效果。

It is possible to have a view move along a curved path if you change the source for the matchedGeometryEffect mid-way through the animation. You don't have much control over the exact path, but with some tweaks to timing it is possible to get it to curve quite nicely.

如果在动画中途更改matchedGeometryEffect的源，则可以使视图沿曲线路径移动。你不能很好地控制准确的路径，但对时间进行一些调整，就有可能让它非常好地弯曲。

It is important that the new target is applied before the first target is reached and withAnimation is used for all changes.

重要的是，在到达第一个目标之前应用新目标，并且对所有更改使用With Animation。

Here is an example to show it working. It gets especially interesting when you press the button multiple times in succession!

这里有一个例子来说明它的工作原理。当你连续多次按下按钮时，它变得特别有趣！

struct ContentView: View {

    enum Box: Hashable {
        case blue
        case red
        case yellow
    }

    @State private var target: Box = .blue
    @Namespace private var namespace

    private func colorForBox(box: Box) -> Color {
        let result: Color
        switch box {
        case .blue: result = .blue
        case .red: result = .red
        case .yellow: result = .yellow
        }
        return result
    }

    private func box(_ box: Box, size: CGFloat) -> some View {
        colorForBox(box: box)
            .frame(width: size, height: size)
            .matchedGeometryEffect(id: box, in: namespace, isSource: target == box)
    }

    private func switchPosition() {
        let newTarget: Box
        let via: Box
        switch target {
        case .blue:
            via = .yellow
            newTarget = .red
        case .yellow:
            via = .red
            newTarget = .blue
        case .red:
            via = .blue
            newTarget = .yellow
        }
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
            withAnimation(.easeInOut(duration: 1)) {
                target = newTarget
            }
        }
        withAnimation(.easeInOut(duration: 1)) {
            target = via
        }
    }

    var body: some View {
        VStack(spacing: 40) {
            ZStack {
                Color.clear
            }
            .overlay(alignment: .top) { box(.blue, size: 100) }
            .overlay(alignment: .bottomLeading) { box(.yellow, size: 80) }
            .overlay(alignment: .trailing) { box(.red, size: 175) }
            .overlay {
                Color.gray
                    .opacity(0.5)
                    .border(.gray)
                    .matchedGeometryEffect(id: target, in: namespace, isSource: false)
            }
            .frame(height: 450)
            .frame(maxWidth: .infinity)
            .padding()

            Button("Switch position", action: switchPosition)
                .buttonStyle(.borderedProminent)
        }
    }
}