问题描述
我正在尝试为使用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()
}
}
解决方法
内圆与外圆的尺寸之比为130 / 300
。在最小时,您希望宽度和高度为300
的圆为130
。
更改所有这些:
.scaleEffect(self.animate ? 1 : 0)
收件人:
.scaleEffect(self.animate ? 1 : 130 / 300)