SwiftUI - 无法使用平滑、居中的动画缩放 ProgressView

Question

我想知道是否有人可以帮助我理解为什么下面的 SwiftUI 代码产生的动画有问题。这是代码：

struct ProgressViewAnimationGlitch: View {
    @State private var isShowingProgressView: Bool = false
    var body: some View {
        ZStack(alignment: .center) {
            if !isShowingProgressView {
                Circle()
                    .fill(Color.red)
                    .onTapGesture {
                        withAnimation {
                            isShowingProgressView = true
                        }
                    }
                    .transition(.scale)
            }
            
            if isShowingProgressView {
                ProgressView()
                    .transition(.scale)
            }
        }
        .frame(width: 100, height: 100, alignment: .center)
    }
}

当我说“故障”时，我的意思是

ProgressView

不仅从右下角滑入而不是从中心弹出，而且在我点击红色圆圈之后它似乎延迟了一会儿才开始它（不正确的）进入动画。

我尝试了很多变体（包括

.scaleEffect(_:)

修饰符），但无法让

ProgressView

按照我的意愿从中心平滑地放大和缩小。

谢谢！

Answer 1

1. 我的开发环境是 Xcode 14.3 / macOS Ventura 13.1
2. 您的代码在 iOS 16.4 模拟器上运行良好。
3. 只有在macOS上才会出现你说的问题，如下图删除

   .transition(.scale)

   的

   ProgressView()

   即可解决。 （也可以改成

   .opacity

   、

   .identity

   类型。）

struct ProgressViewAnimationGlitch: View {
    @State private var isShowingProgressView: Bool = false
    var body: some View {
        ZStack(alignment: .center) {
            if !isShowingProgressView {
                Circle()
                    .fill(Color.red)
                    .onTapGesture {
                        withAnimation {
                            isShowingProgressView = true
                        }
                    }
                    .transition(.scale)
            }
            
            if isShowingProgressView {
                ProgressView()
                    // .transition(.scale)  <-- 👀
            }
        }
        .frame(width: 100, height: 100, alignment: .center)
    }
}