携手创作，共同生长！这是我参加「日新计划 8 月更文挑战」的第20天，点击检查活动概况。
在本章中，你将学会运用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)
)
}
}
}
上述代码中，咱们创建了一个新视图musicLoading。
咱们运用HStack横向视图和ForEach循环遍历创建了5个Capsule胶囊视图，然后运用scaleEffect修饰符让它跟随isAnimation进行缩放。动画部分，同样是距离0.1秒不断循环。
祝贺你，完成了本章的全部内容！
快来着手试试吧。
如果本专栏对你有帮助，无妨点赞、谈论、关注～
