Hi, so I've a simple loader animation, but when I present the animation from a NavigationLink, just for showcase, the view moves up and down, it works fine in the view preview, but simulator and devices have this issue.
struct SystemDesignView: View {
var body: some View {
NavigationStack {
List {
Section("Animated Components WIP") {
NavigationLink {
LoaderView()
} label: {
Text("Loader")
}
}
.navigationTitle("System Design")
}
}
}
}
And here is the animated view:
struct LoaderView: View {
@State private var rotationAngle: Angle = .degrees(0)
private var lineWidth = 2.0
private var lenght = 42.0
var body: some View {
ZStack {
// Full circle
Circle()
.strokeBorder(Color.electric.opacity(0.1), lineWidth: lineWidth)
.frame(width: lenght, height: lenght)
.background(Color.clear)
// Quarter circle
Circle()
.trim(from: 0.0, to: 0.25)
.stroke(Color.electric.opacity(1.0), style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round)) // Rounded corners
.frame(width: lenght - lineWidth, height: lenght - lineWidth)
.rotationEffect(rotationAngle, anchor: .center)
}
.onAppear() {
withAnimation(Animation.linear(duration: 1.0).repeatForever(autoreverses: false)) {
rotationAngle = .degrees(360)
}
}
}
}
struct LoaderView_Previews: PreviewProvider {
static var previews: some View {
LoaderView()
}
}
Any idea?, thanks
