如何插入具有交错缩放动画的一行按钮？

Question

我正在尝试从Castro应用程序中重新创建以下动画...

​

​

( GIF会放慢速度，以便您可以看到效果)

正如你在上面的GIF中看到的，当点击单元格时，你有一排按钮出现。每个按钮都有放大和缩小效果。动画是交错的，这样第一个按钮首先完成，最后一个按钮最后完成。

我试过的..。

struct SwiftUIView: View {
    @State var show: Bool = false
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    show.toggle()
                }
            }, label: {
                Text("Button")
            })
            HStack {
                if show {
                    Button(action: {}, label: { Image(systemName: "circle") })
                        .transition(.scale)
                    Button(action: {}, label: { Image(systemName: "circle") })
                        .transition(.scale)
                    Button(action: {}, label: { Image(systemName: "circle") })
                        .transition(.scale)
                }
            }

        }
    }
}

​

​

正如你在上图中看到的.每个按钮都会放大，但仅当视图被移除时才会放大。另外，我不知道如何错开动画。

Answer 1

尝试以下操作：

struct ContentView: View {
    @State var show = false
    @State var showArray = Array(repeating: false, count: 3)

    var body: some View {
        VStack {
            Button(action: toggleButtons) {
                Text("Button")
            }
            HStack {
                ForEach(showArray.indices, id: \.self) { index in
                    self.circleView(for: index)
                }
            }
        }
    }

    @ViewBuilder
    func circleView(for index: Int) -> some View {
        if show {
            ZStack {
                Image(systemName: "circle")
                    .opacity(.leastNonzeroMagnitude)
                    .animation(nil)
                if showArray[index] {
                    Image(systemName: "circle")
                        .transition(.scale)
                }
            }
        }
    }

    func toggleButtons() {
        showArray.indices.forEach { index in
            withAnimation {
                self.show = true
            }
            DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(index)) {
                withAnimation {
                    self.showArray[index].toggle()
                    if index == self.showArray.count - 1, self.showArray[index] == false {
                        self.show = false
                    }
                }
            }
        }
    }
}

它使用了一个小技巧来正确地对齐视图-在ZStack中有一个几乎没有不透明度的假Image。