加载中，加载中......使用SwiftUI设计2种Loading动画

2023-11-03 221

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 加载中，加载中......使用SwiftUI设计2种Loading动画

加载中，加载中......使用SwiftUI设计2种Loading动画

项目背景

在iOS客户端开发过程中，在页面加载时或者数据更新时，常常需要一个Loading动画进行过渡，避免交互之间的生硬感。

Loading动画有很多，这里提供两种Loading动画供大家参考。

项目搭建

首先，创建一个新的SwiftUI项目，命名为LoadingView。

圆点加载

第一种Loading是在页面初始加载时最常见的方式，基本的交互效果是4个圆点在不断缩放，体现出加载中的效果。

首先我们要声明一个变量控制圆点的缩放，示例：

@State var isAnimation: Bool = false

然后我们构建基础的圆点loading视图，示例：

// 4个圆点加载
func fourDotsLoading() -> some View {
    HStack {
        ForEach(0 ..< 4) { index in
            Circle()
                .fill(Color.green)
                .frame(width: 20, height: 20)
                .scaleEffect(isAnimation ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5)
                    .repeatForever()
                    .delay(Double(index) * 0.2))
        }
    }
}

上述代码中，我们创建了一个新视图fourDotsLoading。

我们使用HStack横向布局，使用ForEach循环遍历了4个圆点，使用scaleEffect修饰符跟随着isAnimation变量进行缩放。动画部分，我们让其间隔0.2秒不断循环。

最后，我们在ContentView中使用视图，并且在视图加载时切换isAnimation的状态，示例：

var body: some View {
    fourDotsLoading()
        .onAppear(){
            self.isAnimation.toggle()
        }
}

圆柱起伏

不错不错，下面我们再学习第二种loading动画，它有点像音乐起伏的效果，几个胶囊形状的圆角矩形不断缩放。

我们创建一个新的视图展示它，示例：

// 音乐起伏加载
func musicLoading() -> some View {
    HStack(alignment: .center, spacing: 5) {
        ForEach(0 ..< 5) { index in
            Capsule(style: .continuous)
                .fill(Color.green)
                .frame(width: 10, height: 50)
                .scaleEffect(isAnimation ? 0.5 : 1.0)
                .animation(Animation.easeInOut(duration: 0.5)
                    .repeatForever()
                    .delay(Double(index) * 0.1)
                )
        }
    }
}