企业官网建设流程全解析

别再逐帧手写动画：Lottie-ios 3 行代码跑通 iOS 矢量动画

【免费下载链接】lottie-iosAn iOS library to natively render After Effects vector animations项目地址: https://gitcode.com/GitHub_Trending/lo/lottie-ios

做 App 的同学大概都干过这种事：一个 3 秒的加载动画，设计师给了 40 张 PNG，你写了一堆Timer、CALayer、UIViewPropertyAnimator把它们拼起来，结果包体积涨了 10MB，帧率还掉。

Lottie-ios 就是为解决这个问题而生的 iOS 动画库：它直接解析 Adobe After Effects 经 bodymovin 导出的 JSON 动画文件，在 iOS 上原生渲染出矢量动画。设计师改动画不用你改代码，同一个动画用 GIF 可能要几百 KB，用 JSON 往往只有几十 KB，而且矢量放大不糊。它支持 iOS、macOS、tvOS、visionOS 四个平台（最低 iOS 13.0 / macOS 10.15）。

装好 Lottie-ios：两种主流方式

Swift Package Manager（推荐）

Xcode 里File > Add Package Dependencies...，输入 lottie-ios 的仓库地址，选最新版本，勾选Lottie这个 product 即可。

CocoaPods

lottie-ios.podspec声明的是lottie-ios，当前版本 4.6.1，在 Podfile 里加：

pod 'lottie-ios', '~> 4.6'

然后pod install。装完import Lottie就能用了，下面所有代码都基于 4.x 的 API。

场景一：加载动画，循环播就完事

这是最常见的用法。把 JSON 文件拖进工程（记得勾 Target Membership），三行代码开跑：

import Lottie let loader = LottieAnimationView(name: "boat_loader") // 文件名，不带扩展名 loader.contentMode = .scaleAspectFit loader.play() // 默认 loopMode 是 .loop，一直循环 view.addSubview(loader)

loopMode是个LottieLoopMode枚举，按需切换：.loop（循环）、.playOnce（播一次）、.autoReverse（往返播放），也可以直接调loader.pause()、loader.stop()控制。

动画来自远端的话，用 URL 初始化器，加载完成在闭包里拿到视图：

LottieAnimationView(url: URL(string: "https://example.com/anim.json")!) { error in if error == nil { self.view.addSubview(self.loader) } }

场景二：按钮点击反馈，只播一段再回头

交互类动画往往不需要播全程。Lottie-ios 4.x 用LottiePlaybackMode.PlaybackMode来描述"播到哪"：

// 点击时：从 0 播到 100%，播完即停 animationView.play(.toProgress(1.0, loopMode: .playOnce)) // 松手时：倒回起点 animationView.play(.toProgress(0.0, loopMode: .playOnce))

项目里还封装好了现成的交互控件：AnimatedControl、LottieButton、LottieSwitch（在 Sources/Public/Controls/），可以直接把 Lottie 动画贴到 UIButton、UISwitch 上，不用自己管状态。

场景三：让用户拖动进度条 / 动态改内容

手动控制进度：currentProgress是 0.0～1.0 的读写属性，绑定手势就能实现"拖动进度条预览动画"：

// 手势拖动时直接赋值 animationView.currentProgress = progress // 监听播放过程中的进度变化 animationView.addProgressObserver(self) { progress in // 同步 UI 上的进度条 }

动态改内容：通过 Value Provider 往指定 keypath 灌值，比如把动画里某个填充改成品牌色：

let colorProvider = ColorValueProvider(UIColor.red) animationView.setValueProvider( colorProvider, keypath: AnimationKeypath("rectangle", "Fill", "Color") )

keypath 的分段名要和 After Effects 里的图层结构对应，不知道路径时可以打开 Lottie 日志（见下文）让 Lottie-ios 把动画的 keypath 树打印出来照着填。

上线前自查：5 个高频坑

1. 动画不播，先查资源。JSON 没勾 Target Membership 是最常见原因；其次确认文件名和LottieAnimationView(name:)传的一致（不写扩展名）。
2. 别在点击回调里 new 视图。每次交互都创建LottieAnimationView会明显掉帧，应复用同一个视图，只控制播放区间。
3. 善用内置缓存。LottieAnimationCache.shared是全局 LRU 缓存，按 name 取动画时默认走它；重复解码同一个 JSON 是白花钱。
4. 渲染引擎按动画复杂度选。默认走 Core Animation 引擎（性能好），遇到它不兼容的特性会自动回退主线程引擎；也可在LottieConfiguration(renderingEngine:)里显式指定.mainThread或.automatic。
5. 注意辅助功能。系统"减弱动态效果"打开时，用LottieConfiguration的ReducedMotionOption配置降级策略，别把动效拉满怼到用户脸上。

SwiftUI 项目同样能用：LottieView（定义在 Sources/Public/Animation/LottieView.swift）直接接LottieAnimation，配合playbackMode控制播放。

去哪找更多例子

• 可运行的 iOS 示例工程：Example/，里面有 SwiftUI 互操作、按钮/开关动画等完整 Demo
• 测试用动画素材（JSON 和 .lottie 文件）：Tests/Samples/，想研究某种动画怎么导出，直接翻这里
• 渲染回归测试与快照：Tests/Snapshots/，能直观看到 Lottie-ios 对各类动画的实际渲染效果
• 更多背景与用法说明：README.md

【免费下载链接】lottie-iosAn iOS library to natively render After Effects vector animations项目地址: https://gitcode.com/GitHub_Trending/lo/lottie-ios