SwiftUI动画：如何移动然后显示？

Posted 2021-05-03

示例

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

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

1. 菜单展开
2. 然后将三个图像淡入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)
    }
}

答案

我不确切知道您想要哪种动画，但是我制定了一些可能在您目标周围的东西。

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

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)
    }
}

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

另一答案

您应该添加每个动画单独，然后每个动画可以具有不同的动画：

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)
    }
}