跳到主要内容

如何在 SwiftUI 中延迟动画

· 阅读需 2 分钟
GoSwiftUI
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))