如何在 SwiftUI 中延迟动画？

Question

我想为两个文本字段设置动画，第二个字段有延迟。但它不起作用，没有延迟，它们同时从位置 100 到 0 设置动画。

代码如下：

@State private var offset: CGFloat = 100
@State private var offset2: CGFloat = 100
@State private var duration = 0.4
@State private var duration2 = 0.4
@State private var opacity = 0.0
@State private var opacity2 = 0.0

VStack(alignment: .leading) {
                          Text("select exercise")
                    .foregroundColor(.gray)
                    .font(.system(size: 36))
                    .fontWeight(.bold)
                    .opacity(opacity)
                    .offset(x: 0.0, y: offset)
                       .onAppear {
                           withAnimation(.easeInOut(duration: duration)) { self.offset = 0
                               self.opacity = 1
                           }
                        }
                Text("00 reps")
                    .foregroundColor(.gray)
                    .font(.system(size: 36))
                    .fontWeight(.bold)
                    .opacity(opacity2)
                    .offset(x: 0.0, y: offset2)
                       .onAppear {
                           withAnimation(.easeInOut(duration: duration2)) { self.offset2 = 0
                               self.opacity2 = 1
                           }
                        }
                    }
                }

我错过了什么？

Answer 1

从您提供的部分代码来看，您似乎在两个闭包中操作了相同的变量。将其更改为每个字段的单独字段。

原因：

当你这样做时：

@State private var changeVar = 0.0

withAnimation(...){
       changeVar = 1.0
   }

SwiftUI 会将该值从动画开始时的值逐渐更改为闭包中提供的值。一旦值发生变化，视图就会使用当前值 changeVar 重新绘制。当您对两个视图使用相同的 var 时，更改会同时应用于两者。因此动画同时开始。

如何在 SwiftUI 中延迟动画？

How to delay animation in SwiftUI?

swift

swiftui