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 =