matchGeometryEffect 并不总是为位置变化设置动画答案

【问题标题】：matchedGeometryEffect not always animates the position changesmatchGeometryEffect 并不总是为位置变化设置动画
【发布时间】：2020-11-04 20:10:21
【问题描述】：

我的目标是模拟一个从一个方块跳到另一个方块的棋子。

struct MyView: View {
    @State var current = 0;
    @State var colors : [Color] = [.blue, .gray, .red]
    @Namespace var animationNamespace : Namespace.ID
    var body : some View {
        HStack(spacing: 12){
            ForEach(colors.indices) { i in
                ZStack{
                    RoundedRectangle(cornerRadius: 8)
                        .fill(colors[i])
                        .frame(width: 50, height: 50)
                    Image(systemName: "person.crop.square")
                        .resizable()
                        .scaledToFit()
                        .cornerRadius(8)
                        .opacity(current == i ? 1.0 : 0.0)
                        .frame(width: 50, height: 50)
                        .matchedGeometryEffect(id: current == i ? -1 : i , in: animationNamespace)
                        .onTapGesture {
                            withAnimation(.easeInOut){
                                current = (current + 1) % colors.capacity
                            }
                        }
                }
            }
        }
    }
}

单击 1 - 从位置 0 到位置 1：确定
单击 2 - 从位置 1 到位置 2：确定
点击 3 - 从位置 3 到位置 0：KO
单击 4 - 从位置 0 到位置 1：确定
单击 5 - 从位置 1 到位置 2：确定
点击 6 - 从位置 3 到位置 0：KO
单击 7 - 从位置 0 到位置 1：确定
...

https://developer.apple.com/documentation/swiftui/view/matchedgeometryeffect(id:in:properties:anchor:issource:)

如果在同一事务中插入一个视图，而另一个具有相同键的视图被删除，系统将在窗口空间中插入它们的框架矩形，以使其看起来有一个视图从其旧位置移动到新位置.

我错过了什么吗？
有什么限制吗？

Xcode 版本 12.1 (12A7403) iOS 14.0

【问题讨论】：

你想做而不能做的事？我测试了你的代码，我点击图像它跳转到下一个带有动画的矩形

标签： swift swiftui swiftui-animation

【解决方案1】：

这里是一个小的修改，使它工作。不要将图像添加到所有 3 个具有不同不透明度的正方形中，而是仅在当前包含 pawn 的那个正方形上绘制图像。使用if current == i { } 执行此操作。如果你这样做，那么你可以使用1 作为matchedGeometryEffect id。

struct ContentView: View {
    @State var current = 0;
    @State var colors : [Color] = [.blue, .gray, .red]
    @Namespace var animationNamespace : Namespace.ID
    var body : some View {
        HStack(spacing: 12){
            ForEach(colors.indices) { i in
                ZStack{
                    RoundedRectangle(cornerRadius: 8)
                        .fill(colors[i])
                        .frame(width: 50, height: 50)
                    if current == i {
                        Image(systemName: "person.crop.square")
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(8)
                            .frame(width: 50, height: 50)
                            .matchedGeometryEffect(id: 1 , in: animationNamespace)
                            .onTapGesture {
                                withAnimation(.easeInOut){
                                    current = (current + 1) % colors.capacity
                                }
                            }
                    }
                }
            }
        }
    }
}

它在模拟器中：

【讨论】：