加载中，加载中......使用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)
                )
        }
    }
}

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

我们使用​​HStack​​​横向视图和​​ForEach​​​循环遍历创建了5个​​Capsule​​​胶囊视图，然后使用​​scaleEffect​​​修饰符让它跟随​​isAnimation​​进行缩放。动画部分，同样是间隔0.1秒不断循环。

恭喜你，完成了本章的全部内容！

快来动手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～