微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决从实际尺寸缩放形状,而不是从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)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。