Question

我想为屏幕上的视图依次动画显示。现在，我的应用程序绘制了圆圈，它们同时出现在屏幕上。但是，如果第一个圆圈占据其位置，并且仅在第二个圆圈之后才开始动画等等，我想这样做。这个问题有什么解决方案？

import SwiftUI

struct ContentView: View {
    var body: some View {
        GenrealView()
    }
}

struct GenrealView: View {
    @State var hide = false
    
    var body: some View {
        giveViewForBody()
    }
    
    func giveViewForBody() -> some View {
        ZStack {
            drawCircles()
            Button(action: {
                self.hide.toggle()
            }) {
                Text(hide ? "Show circles" : "Hide circles")
            }.padding(50)
        }
    }
    
    func drawCircles(times: Int = 4) -> some View {
        ForEach(0..<times) { _ in
            Circle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
                .position(x: -100, y: -100)
                .offset(x: CGFloat(hide ? 0 : 100 + Int.random(in: 100...300)),
                        y: CGFloat(hide ? 0 : 200 + Int.random(in: 50...600)))
                .animation(.easeIn(duration: 2.0))
        }
    }
}

Answer 1

为每个.delay添加一个Circle()，并使每个连续的延迟都更大。将index in添加到您的ForEach循环中，然后进行延迟.delay(2.0 * Double(index))：

func drawCircles(times: Int = 4) -> some View {
    ForEach(0..<times) { index in
        Circle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
            .position(x: -100, y: -100)
            .offset(x: CGFloat(hide ? 0 : 100 + Int.random(in: 100...300)),
                    y: CGFloat(hide ? 0 : 200 + Int.random(in: 50...600)))
            .animation(Animation.easeIn(duration: 2.0).delay(2.0 * Double(index)))
    }
}

如何依次为视图设置动画

1 个答案: