Lottie Swift：方法、示例、安装

Lottie for Swift 简介

\n\n

Lottie 是一个由 Airbnb 开发的开源强大库，允许在移动和网页平台上显示使用 Adobe After Effects 创建的矢量动画。动画通过 Bodymovin 插件导出为 JSON 格式，并实时播放，且不损失质量。

\n\n

对于 Swift 开发者而言，Lottie 开启了无限可能：从简单的加载指示器和图标，到复杂的全屏动画、欢迎界面和交互式界面元素。与 GIF 或视频不同，Lottie 动画具有以下特点：

矢量 — 在任何设备上缩放均不损失质量。
<体积小 — JSON 文件通常只有 1 到 50 KB。
可交互 — 可以控制播放、速度、颜色和进度。
跨平台 — 同一个 JSON 文件可在 iOS、Android、Web、React Native 和 Flutter 上运行。

\n\n

本文是使用 Lottie for Swift 的完整指南。您将学习如何安装该库，掌握所有关键方法，分析一个实际示例，并避免常见错误。

\n\n

安装 Lottie

\n\n

Lottie for Swift 可通过 Swift Package Manager (SPM) 或 CocoaPods 安装。推荐使用 SPM，因为它内置于 Xcode 中。

\n\n

通过 Swift Package Manager (SPM) 安装

在 Xcode 中打开项目，选择 File → Add Packages...
粘贴仓库 URL：https://github.com/airbnb/lottie-ios.git
选择版本（建议使用最新的稳定版），然后点击 Add Package。
确保该包已添加到您的目标中。

\n\n

通过 CocoaPods 安装

如果您使用 CocoaPods，请在 Podfile 中添加：

pod 'lottie-ios'

然后执行：

pod install

\n\n

通过 Carthage 安装（已过时的方法）

github "airbnb/lottie-ios"

执行 carthage update --platform iOS 并将框架添加到项目中。

\n\n

重要提示： 安装后，在需要的文件中导入库：

import Lottie

\n\n

快速上手及代码示例

\n\n

让我们创建一个简单的应用程序，全屏播放 Lottie 动画。

\n\n

步骤 1：准备 JSON 文件

下载或创建一个 Lottie 动画。测试时，您可以使用 LottieFiles 上的免费动画。将 JSON 文件（例如 animation.json）放入 Xcode 项目的 Assets 文件夹中。

\n\n

步骤 2：编写代码

import UIKit\nimport Lottie\n\nclass ViewController: UIViewController {\n    \n    private var animationView: LottieAnimationView?\n    \n    override func viewDidLoad() {\n        super.viewDidLoad()\n        \n        // 1. 从 Assets 初始化动画\n        animationView = LottieAnimationView(name: "animation")\n        \n        // 2. 设置尺寸和位置\n        animationView?.frame = view.bounds\n        animationView?.contentMode = .scaleAspectFit\n        \n        // 3. 添加到屏幕\n        view.addSubview(animationView!)\n        \n        // 4. 启动动画\n        animationView?.play { (finished) in\n            print("动画已完成：\\(finished)")\n        }\n    }\n}

\n\n

运行应用程序 — 您将看到动画播放一次。要使其无限循环，请将 play 调用改为 play(fromProgress: 0, toProgress: 1, loopMode: .loop)。

\n\n