【问题标题】：SwiftUI Animation: How to Move THEN Show?SwiftUI 动画：如何移动 THEN 显示？
【发布时间】：2019-11-24 17:48:40
【问题描述】：

示例

这是一个包含三个项目的菜单：

这很好。但我想要实现的是：

菜单展开
然后三个图像淡入AFTER菜单完成扩展

我想也许为不透明度添加第二个延迟动画可能会起作用，但看起来所有动画（运动和不透明度）都被延迟了：

代码如下：

struct SequenceAnimation_SOQuestion: View {
    @State private var show = false
    
    var body: some View {
        HStack(spacing: 40) {
            Group {
                Image(systemName: "pencil")
                Image(systemName: "scribble")
                Image(systemName: "lasso")
            }
            .opacity(show ? 1 : 0)
            .animation(Animation.default.delay(0.5))

            Button(action: { self.show.toggle() }) {
                Image(systemName: "line.horizontal.3.decrease")
                    .rotationEffect(.degrees(-90))
            }.offset(x: 10)
        }
        .padding(20)
        .padding(.leading, 40)
        .foregroundColor(.white)
        .background(Capsule().fill(Color.blue))
        .font(.largeTitle)
        .offset(x: show ? -70 : -320)
        .animation(.default)
    }
}

【问题讨论】：

标签： swiftui

【解决方案1】：

您应该分别添加每个动画，然后您可以为每个动画添加不同的动画：

struct ContentView: View {
    @State private var isMenuCollapsed = true
    @State private var isItemsVisible = false

    var body: some View {
        HStack(spacing: 40) {
            Group {
                Image(systemName: "pencil")
                Image(systemName: "scribble")
                Image(systemName: "lasso")
            }
            .opacity(isItemsVisible ? 1 : 0)

            Button(action: {
                withAnimation(Animation.default) {
                    self.isMenuCollapsed.toggle()
                }

                withAnimation(Animation.default.delay(0.2)) {
                    self.isItemsVisible.toggle()
                }

            }) {
                Image(systemName: "line.horizontal.3.decrease")
                    .rotationEffect(.degrees(-90))
            }.offset(x: 10)
        }
        .padding(20)
        .padding(.leading, 40)
        .foregroundColor(.white)
        .background(Capsule().fill(Color.blue))
        .font(.largeTitle)
        .offset(x: isMenuCollapsed ? -320 : -70)
    }
}

【讨论】：

【解决方案2】：

我不知道你想要什么样的动画，但我想出了一些可能在你的目标附近的东西。

我改变了动画的工作方式。在您的第二个示例中，您的图像动画不正确，因此以下行修复了以下内容：

struct SequenceAnimation_SOQuestion: View {
    @State private var show = false

    var body: some View {
        HStack(spacing: 40) {
            Group {
                Image(systemName: "pencil")
                Image(systemName: "scribble")
                Image(systemName: "lasso")
            }
            .opacity(show ? 1 : 0)
            .animation(!self.show ? .default : Animation.default.delay(0.5))

            Button(action: { self.show.toggle() }) {
                Image(systemName: "line.horizontal.3.decrease")
                    .rotationEffect(.degrees(-90))
            }.offset(x: 10)
        }
        .padding(20)
        .padding(.leading, 40)
        .foregroundColor(.white)
        .background(Capsule().fill(Color.blue))
        .font(.largeTitle)
        .offset(x: show ? -70 : -320)
        .animation(!self.show ? Animation.default.delay(0.5) : .default)
    }
}

如果您向我提供有关您要实现的目标的更具体的信息，我也许可以帮助您。

【讨论】：

感谢您的回复，托拜厄斯。我更新了我的问题以包含我正在寻找的理想动画的模型。菜单滑出，按钮出现。