ios开发AE动画库 Lottie Swift版介绍及官方文档翻

ios开发AE动画库 Lottie Swift版介绍

---

1.Lottie-ios 简介

Lottie 是一个可应用于Andriod和iOS的动画库，它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件，通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。

2.直达

• lottie-ios github地址： https://github.com/airbnb/lottie-ios
• 预览lottie动画的json文件地址：https://lottiefiles.com/preview

3.Lottie的优势

• 开发无需编写动画，只需加载
• Android、 iOS 和React Native多台支持
• 可手动设置进度,绑定手势,事件等
• 支持本地加载、网络加载，可以动态控制播放速度等
• 相对于帧动画等，内存更小，性能好，显示效果完

4.Lottie的劣势

• 能在AE中实现的效果非常有限
• 对AE使用要求高一点, 动画更加依赖设计师
• 使用位图后,资源消耗大
• lottie库更新太频繁，经常碰到版本不同动画出现问题

5.版本简介

• Lottie从3.0版本开始，已使用Swift 4.0重写！如果你要使用Objective-C版本，请使用Lottie 2.5.3版本。
• Lottie 2.5.3 是OC版本，Lottie 3.0 是swift版本，管文档说是4.0开始重写的，而使用的时候发现我们使用的Lottie 3.0.0版本支持swift 4.2
• Lottie最早用的类好像是LAAnimationView
  后来是LOTAnimationView
  swift版本后用的是 AnimationView

5.用法代码举例

• 1. 最简单调用

let animationV = AnimationView(name: "JSON名") // 如"loading"，不用"loading.json"
// 等价于下面这两行代码
// let animation = Animation.named("loading")
// let animationV = AnimationView(animation: animation)
animationV.frame = CGRect(x: 40, y: 40, width: 80, height: 80)
view.addSubview(animationV)
animationV.play()

• 2. 指定bundle加载

/// Load from the main bundle.
let animation = Animation("StarAnimation")
/// Load from a specific bundle/
let animation = Animation("StarAnimation", bundle: myBundle)
/// Load from a subdirectory in a bundle.
let animation = Animation("StarAnimation", subdirectory: "Animations")
/// Load with an animation cache.
let animation = Animation("StarAnimation", animationCache: LRUAnimationCache.sharedCache)

• 3. 指定路径加载

let animation = Animation(filepathURL.path, animationCache: LRUAnimationCache.sharedCache)

• 4. 播放进度

/// 通过progress (0~1)
animationView.play(fromProgress: 0.5, toProgress: 1)
/// 通过帧时间
animationView.play(fromFrame: 24, toFrame: 48)
/// 通过标签
animationView.play(fromMarker: "ftue1_begin", toMarker: "ftue1_end")

• 5. 暂停

animationView.pause()

• 6. 停止

animationView.stop()

• 7. 重要属性

/// 拉伸模式
var AnimationView.contentMode: UIViewContentMode { get set }
/// 进入后台行为
var AnimationView.backgroundBehavior: LottieBackgroundBehavior { get set }
/// 循环播放模式
var AnimationView.loopMode: LottieLoopMode { get set }
/// 动画播放速度
var AnimationView.animationSpeed: CGFloat { get set }
/// 当前进度
var AnimationView.currentProgress: AnimationProgressTime { get set }

6.官方文档翻译

https://www.jianshu.com/p/207355f796c5