MacOS MenuBarExtra与iOS动画行为差异技术问询

问题现象 #

开发MenuBarExtra应用时，发现scaleEffect动画从左上角起始，而相同代码在iOS设备上是从中心缩放，符合预期。仅scaleEffect存在该问题，文本切换类动画表现正常。

异常动画代码：

struct ContentView: View {
    @State private var scaleAmount = 1.0

    var body: some View {
        VStack {
            Text("Foo")
                .scaleEffect(scaleAmount)
                .animation(.easeOut(duration: 1).repeatForever(), value: scaleAmount)
                .onAppear {
                    scaleAmount = 2
                }
            Text("Bar")
        }
    }
}

正常文本切换动画代码：

var body: some View {
    VStack {
        Text(newText)
            .animation(.easeOut(duration: 1).repeatForever(), value: newText)
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                    newText = "Bar"
                }
            }
    }
}

结论与修复 #

你的猜测正确，问题确实和锚点有关。MenuBarExtra的菜单视图容器布局特性导致scaleEffect默认锚点为左上角，而iOS常规视图默认锚点是中心。

只需显式指定scaleEffect的锚点为.center即可修复：

Text("Foo")
    .scaleEffect(scaleAmount, anchor: .center) // 手动设置锚点为中心
    .animation(.easeOut(duration: 1).repeatForever(), value: scaleAmount)
    .onAppear {
        scaleAmount = 2
    }

原理：iOS常规视图中scaleEffect默认锚点为.center，但MenuBarExtra的窗口容器因特殊性改变了默认锚点，手动指定后即可和iOS端表现一致。

内容的提问来源于stack exchange，提问作者Christian