CODEWITHSUNDEEP
swiftanimationswiftui
LiangWang
LiangWang

Reputation: 8856

SwiftUI strange animation behaviour

I have a very simple spinner animation on a page.

struct SmallSpinner: View {
    @State private var spinXSmall = false
    var body: some View {
        Circle() // X-Small
            .trim(from: 1 / 4, to: 1)
            .stroke(style: StrokeStyle(lineWidth: 1, lineCap: .round, lineJoin: .round))
            .foregroundColor(Color(#colorLiteral(red: 0.6588235294, green: 0.6588235294, blue: 0.6745098039, alpha: 1)))
            .frame(width: 12, height: 12)
            .rotationEffect(.degrees(spinXSmall ? 0 : 360))
            .scaleEffect(spinXSmall ? 1 : 0.8)
            .animation(Animation.easeOut(duration: 1).repeatForever(autoreverses: false))
            .onAppear {
                self.spinXSmall.toggle()
            }
    }
}

It looks strange and i don't know what's the root cause. see video below.

enter image description here

Upvotes: 1

Views: 1165

Answers (1)

belal medhat
belal medhat

Reputation: 534

the issue happens due to an issue in NavigationView and it's not solved yet, so what you need to do is to add the toggle for spinXSmall in DispatchQueue and add a value to the animation Modifier and give it the spinXSmall

struct SmallSpinner: View {
@State private var spinXSmall = false
var body: some View {
    Circle() // X-Small
        .trim(from: 1 / 4, to: 1)
        .stroke(style: StrokeStyle(lineWidth: 1, lineCap: .round, lineJoin: .round))
        .foregroundColor(Color(#colorLiteral(red: 0.6588235294, green: 0.6588235294, blue: 0.6745098039, alpha: 1)))
        .frame(width: 12, height: 12)
        .rotationEffect(.degrees(spinXSmall ? 0 : 360))
        .scaleEffect(spinXSmall ? 1 : 0.8)
        .animation(Animation.easeOut(duration: 1).repeatForever(autoreverses: false),value:spinXSmall)
        .onAppear {
            DispatchQueue.main.async {
            self.spinXSmall.toggle()
        }
        }
   }
   }

Upvotes: 4

Related Questions