SwiftUI 创建动画圈

Question

我想创建一些这样的内容，一个闪烁的绿色圆圈，它在单一预览模式下工作

但是当我将视图放入列表时，绿色圆圈开始左右移动

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
                }
            }
        
    }
}

在导航视图中使用

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

Answer 1

正如我在 cmets 中所写的那样，它对我来说是不可重现的，但请尝试以下...

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
            }
    }
}