SwiftUI Create a Animating Circle

Question

I'd like to create some content like this, a blinking green circle, and it works in the single preview mode

But when I put the View inside a List, the Green circle start moving left and right

struct DotView: View {
    @State var delay: Double = 0 // 1.
    @State var scale: CGFloat = 0.5
    var body: some View {
        Circle()
            .frame(width: 6, height: 6)
            .foregroundColor(Color.green)
            .scaleEffect(scale)
            .animation(Animation.easeInOut(duration: 0.6).repeatForever().delay(delay)) // 2.
            .onAppear {
                withAnimation {
                    self.scale = 1
                }
            }
        
    }
}

Using inside a navigation view

List {
    VStack {
        HStack {
          Text(server.name)
             .fontWeight(.bold)
             .foregroundColor(Color.primary)
             .fontWeight(.light)
             .foregroundColor(.gray)
         Spacer()
         DotView()
       }
    }
}

Provided code works fine with Xcode 12.4 / iOS 14.4 (even being placed into NavigationView). Would you elaborate more? — Asperi

Asperi Asperi · Accepted Answer · 2021-03-22T17:12:55

As I wrote in comments it is not reproducible for me, but try the following...

struct DotView: View {
    var delay: Double = 0 // 1. << don't use state for injectable property

    @State private var scale: CGFloat = 0.5

    var body: some View {
        Circle()
            .frame(width: 6, height: 6)
            .foregroundColor(Color.green)
            .scaleEffect(scale)
            .animation(
                Animation.easeInOut(duration: 0.6)
                   .repeatForever().delay(delay), value: scale  // 2. << link to value
            )
            .onAppear {
                self.scale = 1    // 3. << withAnimation no needed now
            }
    }
}

SwiftUI Create a Animating Circle

1 Answers