用lottie-ios 3步跑通iOS加载动画【免费下载链接】lottie-iosAn iOS library to natively render After Effects vector animations项目地址: https://gitcode.com/GitHub_Trending/lo/lottie-iosLottie-ios 是 Airbnb 出品的 iOS 动画渲染库。它原生解析 After Effects 导出的矢量动画 JSON在端上直接绘制不用打包帧图。这类 JSON 文件通常比同效果 GIF 小 80% 左右。适合需要加载动画、按钮交互动效和页面过渡的 iOS 开发者。能力速览能力说明Core Animation 引擎渲染60fps主线程零负担引擎自动回退不支持的动画走 mainThreadDotLottie 文件支持一个 .lottie 装多段动画Value Provider运行时改填充色、大小、文本内置 LRU 动画缓存解析结果直接复用多平台iOS、macOS、tvOS、visionOS3步装好lottie-ios并跑起第一个动画环境要求一句话iOS 13.0、Xcode 15无第三方依赖。第一步Xcode 菜单 File → Add Package Dependencies地址填 https://gitcode.com/GitHub_Trending/lo/lottie-ios 勾选 Lottie 库。第二步把设计师给的 JSON 拖进工程确认 Target Membership 已勾选。第三步创建视图并播放import Lottie let animationView LottieAnimationView(name: Boat_Loader) // JSON文件名不带扩展名 animationView.contentMode .scaleAspectFit view.addSubview(animationView) animationView.play() // 默认只播一遍name写错就是白屏这是新手踩坑重灾区。实战场景加载动画与按钮交互让加载页循环而不放骨架屏加载态是 lottie-ios 最高频的场景。注意默认只播一遍循环必须显式设.looplet loader LottieAnimationView(name: Boat_Loader) loader.loopMode .loop // 别漏这行 view.addSubview(loader) loader.play()网络请求回来要撤掉加载态时调pause()即可重新请求时再play()会从断点继续不用重建视图。加载态搞定后顺手把按钮反馈也换成动效。让按钮点击有即时反馈思路就一条播一遍播完回初始帧。let heart LottieAnimationView(name: TwitterHeart) // button.addTarget(self, action: #selector(tap), for: .touchUpInside) objc func tap() { heart.play { _ in heart.stop() // 播完回到初始状态 } }仓库测试样例里的图标形变动画就是这个模式除了播还有一个高频诉求不改动画文件直接改它的颜色。不动设计师改动画配色绑一个 Value Provider 到对应 keypath运行时生效import Lottie let color ColorValueProvider(UIColor.systemBlue) heart.setValueProvider(color, keypath: AnimationKeypath(Layer1.Fill_1.Color))keypath 跟动画图层结构一一对应。不确定路径时用 Lottie Preview 或调试日志查。进阶拖进度与切换渲染引擎跑通播放后生产环境真正用到的是这两个 APIanimationView.currentProgress 0.5 // 滑块联动进度 // 显式指定主线程渲染引擎 let conf LottieConfiguration(renderingEngine: .mainThread) let view LottieAnimationView(name: Boat_Loader, configuration: conf)默认是.automatic能走 Core Animation 就走遇到不支持的特性自动回退 mainThread。显式指定只为了排查问题或保证行为确定。常见坑现象、原因、解法加完动画是白屏。name 和 JSON 文件名对不上或文件没进 Target。改名字或换成filePath:按绝对路径加载。复杂动画掉帧卡顿。图层太多或叠了模糊、混合效果。简化动画或减少同屏播放数量。日志出现引擎回退警告。该动画含 Core Animation 不支持的特性已自动走 mainThread。渲染正常忽略即可。首帧延迟高。每次解析 JSON 都花主线程时间。默认已挂LottieAnimationCache.shared缓存大文件优先瘦身或换 DotLottie 格式。Lottie-ios 的边界很清楚2D 矢量动效场景如加载态、按钮反馈、页面过渡都基于解析 AE JSON 来画。3D 效果、实拍视频类动效它覆盖不了。掌握 play、keypath、configuration、缓存四件事日常需求基本够用。Example/ 示例项目SwiftUI 下的用法演示Sources/ 源码公共 API 与双渲染引擎实现Tests/ 测试用例含大量样例动画 JSON 和快照结果【免费下载链接】lottie-iosAn iOS library to natively render After Effects vector animations项目地址: https://gitcode.com/GitHub_Trending/lo/lottie-ios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考