第一种Loading动画：旋转圆圈

2024-02-15 23:14:53

SwiftUI设计2种Loading动画，让你的App更优雅地加载！

Loading动画在iOS客户端开发中随处可见，它可以在页面加载、数据更新等场景下为用户提供视觉反馈，让App交互更加优雅。本文将介绍两种使用SwiftUI设计的Loading动画，助力你的App提升用户体验。

旋转圆圈是常见的Loading动画，它简单直观，可以轻松集成到SwiftUI中。以下是实现步骤：

struct CircleLoadingView: View {
    @State private var isAnimating = false

    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth: 5)
                .foregroundColor(.blue)
                .frame(width: 50, height: 50)

            Circle()
                .trim(from: 0, to: 0.5)
                .stroke(style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))
                .foregroundColor(.blue)
                .frame(width: 50, height: 50)
                .rotationEffect(Angle(degrees: isAnimating ? 360 : 0))
                .animation(Animation.linear(duration: 1).repeatForever(autoreverses: false))
        }
    }
}

加载条动画可以直观地展示加载进度，它同样可以使用SwiftUI实现。

struct LoadingBarView: View {
    @State private var progress: Double = 0.0

    var body: some View {
        VStack {
            ProgressView()
                .progress(progress)
                .frame(width: 200, height: 20)

            Button(action: {
                withAnimation(.easeInOut(duration: 0.5)) {
                    progress += 0.1
                    if progress >= 1.0 {
                        progress = 0.0
                    }
                }
            }) {
                Text("更新进度")
            }
        }
    }
}

优化和集成

为了优化Loading动画，我们可以通过以下方法：

缩小动画的尺寸和复杂度，减少内存消耗和渲染时间。
调整动画的持续时间和旋转速度，找到最适合用户体验的节奏。
使用系统默认的Loading动画，以确保与App其他部分的一致性。

集成Loading动画非常简单，只需在需要的地方添加相应的View即可。例如：

struct ContentView: View {
    @State private var isLoading = true

    var body: some View {
        VStack {
            if isLoading {
                CircleLoadingView()
            }

            Button(action: {
                isLoading.toggle()
            }) {
                Text("加载数据")
            }
        }
    }
}