SwiftUI-三点旋转加载动画

SwiftUI 是苹果公司推出的用于构建iOS、macOS、watchOS和tvOS等平台用户界面的现代化框架。在SwiftUI中，开发人员可以使用声明式编程语法来创建美观且响应式的UI。本教程将深入探讨如何在SwiftUI中实现一个经典的三点旋转加载动画。 三点旋转加载动画通常由三个相等距离分布的小圆点组成，它们依次旋转，呈现出一种持续加载或等待的状态。这种动画在许多应用中被广泛使用，因为它既简单又直观。 我们需要创建一个自定义的视图，用于绘制这三个小圆点。我们可以使用Path几何形状来完成这一任务。Path允许我们定义复杂的矢量图形，并在SwiftUI中渲染它们。以下是如何创建一个简单的圆形Path： ```swift struct LoadingDot: Shape { var radius: CGFloat = 10.0 func path(in rect: CGRect) -> Path { let center = CGPoint(x: rect.midX, y: rect.midY) return Path { path in path.addArc(center: center, radius: radius, startAngle: .zero, endAngle: .pi * 2, clockwise: false) } } } ``` 接下来，我们将创建一个名为`LoadingView`的新视图，该视图包含三个`LoadingDot`，并使用`GeometryReader`来获取其大小。然后，通过旋转每个圆点来实现动画效果： ```swift struct LoadingView: View { @State private var angle: Double = 0.0 var body: some View { GeometryReader { geometry in HStack(spacing: geometry.size.width / 4) { ForEach(0..<3) { index in LoadingDot() .foregroundColor(.white) .scaleEffect(index == Int(angle / (2 * Double.pi)) ? 1.0 : 0.5) .rotationEffect(Angle(degrees: Float(angle))) .animation(.linear) } } } .onAppear { DispatchQueue.main.asyncAfter(deadline: .now() + 1) { withAnimation(.linear(duration: 1.0)) { self.angle += 2 * Double.pi } } } } } ``` 在这个`LoadingView`中，我们使用`ForEach`循环遍历三个圆点，并根据当前的`angle`值应用`rotationEffect`。我们还添加了一个`.animation`修饰符，使旋转过程平滑进行。`onAppear`方法确保在视图首次出现时启动动画。我们使用`DispatchQueue`延迟动画的启动，以便用户有时间注意到加载动画。 我们可以在其他SwiftUI视图中嵌入`LoadingView`，例如： ```swift struct ContentView: View { var body: some View { VStack { Text("正在加载...") LoadingView() } } } ``` 这样，我们就成功地在SwiftUI中实现了三点旋转加载动画。你可以根据需要调整圆点的颜色、大小以及动画速度，以适应你的应用设计。这个例子展示了SwiftUI的强大功能，它使得创建自定义动画变得轻松而直观。