SwiftUI ScaleEffect动画问题

我正在用swiftUI制作一个动画脉冲播放按钮。一切正常，但动画从左上角开始 这是一个截图。

但是填充圆（）应该在play.fill图标的后面，笔划应该只是它的脉冲 我用的代码就是这个

import SwiftUI

struct PlayView: View {
    @State private var pulsate = false
    @State private var showWaves = false
    var body: some View {
        ZStack{
            
            Circle()
                .stroke(lineWidth: 2)
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                .scaleEffect(showWaves ? 2 : 1)
                .hueRotation(.degrees(showWaves ? 360 : 0))
                .opacity(showWaves ? 0 : 1)
                .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: false).speed(1))
                .onAppear(){
                    self.showWaves.toggle()
                }
            Circle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                .scaleEffect(pulsate ? 1 : 1.2)
                .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true).speed(1))
                .onAppear(){
                    self.pulsate.toggle()
                }
            Image(systemName: "play.fill")
                .font(.largeTitle)
                .foregroundColor(.white)
        }.shadow(radius: 25)
        
    }
}

---

与您提供的代码不可复制。请提供一个容器视图，看起来它一定是问题的原因。这是否回答了您的问题？还是这个？