iOS Loading 动画
在 iOS 应用开发中,经常会遇到需要展示加载动画的场景。加载动画可以增强用户体验,使用户在等待数据加载完成时感到更加舒适和专注。本文将介绍 iOS 应用中实现加载动画的几种常用方式,并提供相应的代码示例。
1. 使用 UIActivityIndicatorView
UIActivityIndicatorView
是 iOS UIKit 框架提供的用于显示加载动画的控件。它通常以一个圆圈的形式,不断旋转表示正在加载。
![](
以下是使用 UIActivityIndicatorView
实现加载动画的代码示例:
import UIKit
class LoadingViewController: UIViewController {
// 创建 UIActivityIndicatorView
let activityIndicator = UIActivityIndicatorView(style: .gray)
override func viewDidLoad() {
super.viewDidLoad()
// 居中显示 UIActivityIndicatorView
activityIndicator.center = view.center
view.addSubview(activityIndicator)
}
// 在需要显示加载动画时调用
func startLoadingAnimation() {
activityIndicator.startAnimating()
}
// 在加载完成后停止动画
func stopLoadingAnimation() {
activityIndicator.stopAnimating()
}
}
将上述代码添加到你的视图控制器中,并在需要显示加载动画的地方调用 startLoadingAnimation
方法即可。加载完成后,调用 stopLoadingAnimation
方法停止动画。
2. 使用 Lottie 动画库
[Lottie]( 是一个由 Airbnb 开源的动画库,可以方便地在 iOS 应用中展示复杂的加载动画。使用 Lottie,你可以通过 JSON 文件或 After Effects 导出的动画文件来实现各种炫酷的加载动画。
以下是使用 Lottie 实现加载动画的代码示例:
首先,将 Lottie 添加到项目的依赖中。使用 CocoaPods,只需在 Podfile
中添加以下行:
pod 'lottie-ios'
然后,在终端中执行 pod install
命令安装 Lottie。
在使用 Lottie 的视图控制器中,添加一个 LOTAnimationView
对象来加载并播放动画:
import UIKit
import Lottie
class LoadingViewController: UIViewController {
// 创建 LOTAnimationView
let animationView = LOTAnimationView(name: "loading_animation")
override func viewDidLoad() {
super.viewDidLoad()
// 设置动画的位置和大小
animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
animationView.center = view.center
// 将动画视图添加到当前视图控制器中
view.addSubview(animationView)
}
// 在需要显示加载动画时调用
func startLoadingAnimation() {
animationView.loopAnimation = true
animationView.play()
}
// 在加载完成后停止动画
func stopLoadingAnimation() {
animationView.stop()
}
}
将上述代码添加到你的视图控制器中,并在需要显示加载动画的地方调用 startLoadingAnimation
方法即可。加载完成后,调用 stopLoadingAnimation
方法停止动画。
3. 使用 CALayer 实现自定义加载动画
如果你需要更多的自定义控制和动画效果,可以使用 CALayer 来创建自定义的加载动画。CALayer 是 Core Animation 框架提供的一种二维图层,可以实现各种动画效果。
以下是使用 CALayer 实现自定义加载动画的代码示例:
import UIKit
class LoadingViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 创建一个 CAShapeLayer 作为加载动画的图层
let circleLayer = CAShapeLayer()
// 创建一个圆的路径
let circlePath = UIBezierPath(
arcCenter: view.center,
radius: 50,
startAngle: 0,
endAngle: CGFloat.pi * 2,
clockwise: true)
// 设置 CAShapeLayer 的路径
circleLayer.path = circlePath.cgPath
// 设置 CAShapeLayer 的填充颜色和边框颜色
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.strokeColor = UIColor.blue.cgColor
// 设置 CAShapeLayer 的线宽和动画属性
circleLayer.lineWidth = 5
circleLayer.lineCap =