跳到主要内容

如何在 SwiftUI 中延迟动画

· 阅读需 2 分钟
GoSwiftUI
goswiftui.com

在 SwiftUI 中使用动画时,我们有时需要延迟动画,例如在向用户显示 UI 元素后在一段时间后将其隐藏。

让我们直接开始,看看如何做到这一点。

我们来看看以下示例:

@State private var offset = -60.0 // 1.

var body: some View {
ErrorView()
.offset(y: offset)
.onAppear {
// 2.
withAnimation(.bouncy) {
offset = 60.0
} completion: {
// 3.
withAnimation(.bouncy) {
offset = -60.0
}
}
}
}

我们在上面的代码中所做的是:

  1. 将视图的初始偏移量设置为屏幕边界之外,以便它最初不可见。
  2. 只要视图出现,我们就会对其进行动画处理,使其偏移量不同,以便在屏幕上可见。
  3. 只要动画完成,我们就会对视图进行动画处理,使其返回到不可见偏移量。

示例中缺少的是延迟,因此视图在反弹回来之前会在屏幕上停留几秒钟。

由于延迟内置于 SwiftUI 动画中,我们可以通过一个简单的调用来实现这一点。我们需要做的就是为第二个动画添加延迟:

withAnimation(.bouncy.delay(3))