如何在SwiftUI中延迟动画

Question

我想设置两个Text字段的动画，第二个字段有延迟。但它不起作用，没有延迟，它们同时从位置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时，更改将同时应用于这两个视图。因此，动画将同时为两者启动。