从实际尺寸缩放形状,而不是从0开始

问题描述

我正在尝试为使用swiftui制作的应用制作脉冲动画。我想要一个中心的灰色圆圈跳动。目前,外部圆圈从0开始缩放,但我希望它们从中间圆圈的大小开始。 这是我当前的代码

import SwiftUI

struct pulse: View {
    
    @State var animate = false
    @State private var scale: CGFloat = 2
    var body: some View {
        ZStack
        {
            Circle()
                .fill(Color.black)
                .frame(width: 130,height: 130)
            Circle()
                .stroke(Color.red.opacity(0.1),linewidth: 5)
                .frame(width: 300,height: 300)
                .scaleEffect(self.animate ? 1 : 0)
            Circle()
                .stroke(Color.red.opacity(0.15),linewidth: 5)
                .frame(width: 266,height: 266)
                .scaleEffect(self.animate ? 1 : 0)
            
            Circle()
                .stroke(Color.red.opacity(0.2),linewidth: 5)
                .frame(width: 232,height: 232)
                .scaleEffect(self.animate ? 1 : 0)
            
            Circle()
                .stroke(Color.red.opacity(0.3),linewidth: 5)
                .frame(width: 198,height: 198)
                .scaleEffect(self.animate ? 1 : 0)
            
            Circle()
                .stroke(Color.red.opacity(0.35),linewidth: 5)
                .frame(width: 164,height: 164)
                .scaleEffect(self.animate ? 1 : 0)
            
            Circle()
                .stroke(Color.red.opacity(0.4),linewidth: 5)
                .frame(width: 130,height: 130)
                .scaleEffect(self.animate ? 1 : 0)

            
            Circle()
                .fill(Color.gray)
                .frame(width: 130,height: 130)
            
        }
        .frame(width: 290,height: 290,alignment: .center)
        .onAppear(perform: {
            self.animate.toggle()
        })
        .animation(Animation.linear(duration: 6).repeatForever(autoreverses: true))
        .ignoresSafeArea()
    }
}

how it looks

解决方法

内圆与外圆的尺寸之比为130 / 300。在最小时,您希望宽度和高度为300的圆为130

更改所有这些:

.scaleEffect(self.animate ? 1 : 0)

收件人:

.scaleEffect(self.animate ? 1 : 130 / 300)