swiftUI 圆形loading 动画

原创

mob64ca12dba5b0 2024-09-10 04:46:23 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12dba5b0的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 SwiftUI 实现圆形 Loading 动画

在 iOS 应用开发中，Loading 动画是提升用户体验的重要组成部分。本文将教会您如何使用 SwiftUI 创建一个简单的圆形 Loading 动画。整个实施过程将分为几个步骤，通过表格进行展示，并详细讲解每个步骤所需的代码和意义。

实施流程

下面的表格展示了实现圆形 Loading 动画的基本步骤：

步骤	描述	估计完成时间
1	创建 SwiftUI 项目	10 分钟
2	创建 Loading 视图	20 分钟
3	实现动画效果	30 分钟
4	调整样式和效果	15 分钟
5	测试和优化	15 分钟

Gantt 图

gantt
    title SwiftUI Loading 动画开发日程
    dateFormat  YYYY-MM-DD
    section 创建项目
    创建 SwiftUI 项目           :done, 2023-11-01, 10m
    section Loading 视图
    创建 Loading 视图           :done, 2023-11-01, 20m
    section 动画实现
    实现动画效果                :done, 2023-11-02, 30m
    section 样式和效果调整
    调整样式和效果              :done, 2023-11-02, 15m
    section 测试和优化
    测试和优化                  :done, 2023-11-02, 15m

步骤详细说明

步骤 1：创建 SwiftUI 项目

首先，打开 Xcode 并创建一个新的 SwiftUI 项目。

打开 Xcode。
选择 "Create a new Xcode project"。
选择 "App" 模板并点击 "Next"。
输入项目名称，选择 SwiftUI 为界面，点击 "Next"。
选择保存路径并点击 "Create"。

步骤 2：创建 Loading 视图

在项目中创建一个名为 LoadingIndicator.swift 的新 Swift 文件，内容如下：

import SwiftUI

struct LoadingIndicator: View {
    // 控制动画的状态
    @State private var isAnimating = false

    var body: some View {
        // 创建一个圆形的进度指示器
        Circle()
            .trim(from: 0, to: 0.8) // 裁剪圆形
            .stroke(Color.blue, lineWidth: 8) // 设置颜色和边框宽度
            .rotationEffect(Angle(degrees: isAnimating ? 360 : 0)) // 实现旋转效果
            .animation(Animation.linear(duration: 1.0).repeatForever(autoreverses: false)) // 设置动画
            .onAppear {
                self.isAnimating = true // 在视图出现时开始动画
            }
            .frame(width: 100, height: 100) // 设置视图大小
    }
}

代码解释：

@State private var isAnimating = false: 这是用于控制动画状态的状态变量。
Circle().trim(from: 0, to: 0.8): 创建一个圆形，并裁剪出 80% 的部分。
.stroke(Color.blue, lineWidth: 8): 设置圆形的边框颜色和宽度。
.rotationEffect(Angle(degrees: isAnimating ? 360 : 0)): 创建一个旋转效果，当 isAnimating 为真时旋转 360 度。
.animation(...): 设置动画的类型、时长、是否重复等属性。
onAppear: 在视图显示时触发的生命周期事件，用于开始动画。
frame(width: 100, height: 100): 设置视图的宽度和高度。

步骤 3：实现动画效果

接下来，在项目的 ContentView.swift 文件中调用 LoadingIndicator 视图：

struct ContentView: View {
    var body: some View {
        VStack {
            // 其他内容
            Text("Loading...")
                .font(.headline) // 设置文本字体
                .padding() // 添加内边距
            LoadingIndicator() // 调用 LoadingIndicator 视图
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 设置视图最大宽高
        .background(Color.white) // 设置背景颜色
    }
}

代码解释：

在 VStack 中添加了一个文本和我们的 LoadingIndicator 视图。
frame(maxWidth: .infinity, maxHeight: .infinity): 视图充满整个可用空间。
background(Color.white): 设置背景为白色。

步骤 4：调整样式和效果

您可以根据需要自定义 Loading 动画的颜色、大小和速率。例如，更改 Color.blue 为 Color.green，并调整 lineWidth 和动画持续时间：

.stroke(Color.green, lineWidth: 10) // 改为绿色并加宽
.animation(Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: false)) // 更改动画效果为 Ease In Out