swiftui 加载数据动画

SwiftUI 加载数据动画

在移动应用开发中，经常需要从服务器或本地数据库加载数据并在界面上展示。为了提供更好的用户体验，我们可以使用动画来增强数据加载过程的可视化效果。在本文中，我们将介绍如何在 SwiftUI 中使用动画来展示数据加载过程。

使用 ProgressView 展示加载过程

SwiftUI 提供了一个 ProgressView 组件，用于展示加载过程的进度。我们可以简单地将 ProgressView 添加到视图中，并使用 @State 属性来控制进度的变化。

以下是展示如何使用 ProgressView 的示例代码：

import SwiftUI

struct ContentView: View {
    @State private var isLoading = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isLoading.toggle()
            }) {
                Text("Load Data")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            
            if isLoading {
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle())
                    .padding()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的代码中，我们创建了一个按钮，点击按钮时会切换 isLoading 属性的值。当 isLoading 属性为 true 时，将展示一个 ProgressView 组件。

添加动画效果

除了展示加载过程的进度，我们还可以为加载数据的过程添加一些动画效果，以增加用户体验。

在 SwiftUI 中，可以使用 .animation() 修饰符来为视图添加动画效果。我们可以将 .animation() 修饰符应用于整个视图，或者仅应用于特定的子视图。

以下是展示如何为加载过程添加动画效果的示例代码：

import SwiftUI

struct ContentView: View {
    @State private var isLoading = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isLoading.toggle()
            }) {
                Text("Load Data")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            
            if isLoading {
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle())
                    .padding()
                    .animation(.easeIn)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的代码中，我们使用 .animation(.easeIn) 修饰符为 ProgressView 添加了一个渐入的动画效果。当 isLoading 属性发生改变时，动画效果将会触发。

自定义加载动画

除了使用系统提供的 ProgressView，我们还可以创建自定义的加载动画来展示数据的加载过程。

在 SwiftUI 中，可以使用 ViewModifier 来创建自定义的视图修饰符。我们可以使用 GeometryReader 来获取视图的尺寸信息，并使用 Shape 和 Animation 来实现自定义的加载动画。

以下是展示如何创建自定义加载动画的示例代码：

import SwiftUI

struct LoadingView: ViewModifier {
    @State private var isAnimating = false
    
    func body(content: Content) -> some View {
        GeometryReader { geometry in
            ZStack {
                ForEach(0..<6) { index in
                    Rectangle()
                        .fill(Color.blue)
                        .frame(width: geometry.size.width / 6 - 3, height: geometry.size.height / 3)
                        .rotationEffect(Angle(degrees: isAnimating ? 360 : 0))
                        .offset(y: -(geometry.size.width / 6 - 3) / 2)
                }
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .onAppear {
                withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                    self.isAnimating = true
                }
            }
        }
    }
}

extension View {
    func loadingView() -> some View {
        self.modifier(LoadingView())
    }
}

struct ContentView: View {
    @State private var isLoading = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isLoading.toggle()
            }) {
                Text("Load Data")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            
            if isLoading {
                Rectangle()
                    .fill(Color.gray)
                    .frame(width: 100, height: 100)