lottie-ios5 行代码跑通第一个 After Effects 动画新手完整指南【免费下载链接】lottie-iosAn iOS library to natively render After Effects vector animations项目地址: https://gitcode.com/GitHub_Trending/lo/lottie-ioslottie-ios 是 Airbnb 开源的 iOS 动画库它把设计师用 Adobe After Effects 导出为 JSON 的矢量动画直接渲染成原生 iOS 动画省掉一张张切图、一段段手写动画代码的繁琐。本文带你从零安装到跑通播放再到常见场景和踩坑排查照着做就能上手。核心能力速览能力说明双渲染引擎默认自动选择 Core Animation 引擎不占 CPU不支持的特性自动回退 Main Thread 引擎多平台iOS 13.0 / macOS 10.15 / tvOS 13.0 / visionOS 1.0见 Package.swift文件小巧动画是 JSON 或.lottie文件比 GIF/视频体积小得多可无限缩放不失真动态控制播放/暂停/循环/调速/按进度拖拽还能用 Keypath Value Provider 运行时改颜色、文本UIKit 与 SwiftUI 双入口LottieAnimationViewUIKit和LottieViewSwiftUI⚡ 所有公开 API 都在 Sources/Public/ 下按 Animation、Configuration、DynamicProperties 等目录分好找起来不费劲。环境与安装前置要求以仓库 Package.swift 和 lottie-ios.podspec 为准Xcode 15SPM 清单要求 swift-tools-version 6.0部署目标 iOS 13.0Swift 5 兼容推荐Swift Package ManagerXcode 中打开菜单 File Add Package Dependencies...填入仓库地址clone 场景用https://gitcode.com/GitHub_Trending/lo/lottie-ios选择最新版本当前 4.6.1确认安装备选CocoaPods在 Podfile 中写入pod lottie-ios, ~ 4.0执行pod install最小可运行示例把动画 JSON如仓库测试素材 Tests/Samples/LottieFiles/ 里的success.json拖进工程并勾选 Target Membership然后import Lottie let view LottieAnimationView(name: success) view.contentMode .scaleAspectFit view.loopMode .loop view.frame CGRect(x: 0, y: 0, width: 300, height: 300) parentView.addSubview(view) view.play()运行后就能看到动画循环播放。name:传的是不含扩展名的文件名这是新手最常写错的地方。典型场景实战加载态循环播放加载中、等待网络返回这类场景用循环播放 完成回调即可let loading LottieAnimationView(name: boat_loader) loading.loopMode .loop loading.play()按钮反馈图标形变过渡汉堡菜单变箭头这类 UI 状态切换用进度区间播放menuIconView.loopMode .autoReverse menuIconView.play(fromProgress: 0, toProgress: 1)动态换色运行时修改动画内容同一个动画文件不同品牌色只需换一层颜色不必让设计师重做let keypath AnimationKeypath(keypath: **.Fill 1.Color) let provider ColorValueProvider(.systemRed) animationView.setValueProvider(provider, keypath: keypath)进阶玩法进度控制currentProgress0~1可以读可以写配合滑杆就能实现手势拖动动画animationSpeed调速度。Marker 播放设计师在 AE 里打标记开发端用play(fromMarker:toMarker:)只播某一段不用记帧号。事件联动play { completed in ... }的回调里接下一个业务动作串起动画 → 跳转的流程。.lottie文件一个压缩包可含多段动画和配套图片用LottieAnimationView(dotLottieName:)加载相关 API 在 Sources/Public/DotLottie/。SwiftUI直接声明LottieView { ... }仓库示例 Example/Example/AnimationPreviewView.swift 有完整用法可抄。性能调优与常见问题排查现象动画不播放原因JSON 没勾 Target Membership或name:带了.json后缀/与文件名不一致。 解法在 Xcode 右侧文件检查器确认勾选名字只传文件基本名。现象显示被裁切或比例不对原因视图 frame 与动画画布比例不一致时超出部分默认会被裁掉。 解法设contentMode .scaleAspectFit或maskAnimationToBounds false允许内容溢出边界。现象复杂动画掉帧、发热原因动画含 Core Animation 引擎不支持的特性如表达式回退到 Main Thread 引擎后每帧都走 CPU 渲染。 解法保持默认RenderingEngineOption.automatic见 Sources/Public/Configuration/RenderingEngineOption.swift确认不了的动画可用view.currentRenderingEngine查看实际引擎静态展示场景开shouldRasterizeWhenIdle true。现象动画里的图片显示不出来原因JSON 引用了位图素材但默认BundleImageProvider在 Bundle 里找不到对应图片。 解法初始化时显式传入imageProvider或把素材图片与 JSON 放同一 Bundle。✅ 排查时可以先跑 Example/ 示例工程验证环境没问题再去改自己的代码。写在最后lottie-ios 把设计师产出的动画直接变成了几行代码就能播的视图双渲染引擎和动态 Value Provider 让它既能省资源又能灵活定制。建议下一步打开 Example/ 示例工程把 Tests/Samples/ 里的素材换成你自己的动画跑一遍加载态和按钮反馈两个场景。示例项目Example/库源码Sources/测试用例Tests/【免费下载链接】lottie-iosAn iOS library to natively render After Effects vector animations项目地址: https://gitcode.com/GitHub_Trending/lo/lottie-ios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考