Lottie 源码初步

Lottie 源码分析0, 入门.

Lottie 是一个多端的动画展示框架, 只要使用它支持格式的动画描述文件, 即可实现相应的动画. 但是 Lottie 到底是如何去处理和实现这些动画的呢?

在 iOS 平台上, 从使用者的角度看, Lottie 的使用流程非常简单:

1. 准备一个动画描述文件: bodymovin JSON 格式的文件.

2. 使用类似 Animation.named("LottieLogo2", subdirectory: "TestAnimations") 方式(named 静态方法位于一个扩展中), 将动画文件读取到一个 Animation 对象中保存. 官方文档上写 An Animation holds all of the animation data backing a Lottie Animation. 即 Animation 对象持有 Lottie 动画所需的全部动画数据. 这个对象是 Codable 的, 通过 JSON 字符串将其初始化, JSON 中的所有数据就被解码到这个对象内. 并且 JSON 中的 Schema 说明都可以在这个地方找到.

3. 下一步是创建 iOS 中的 Lottie 动画容器视图 let animationView = AnimationView(), 继承关系是: AnimationView -> LottieView -> UIView. AnimationView 也有扩展, 扩展里面主要提供了一些初始化方法.

4. 将 AnimationView 布局到视图上, 并将动画设置到它上面 animationView.animation = animation, 即可自动执行动画.

可以看到, 整个使用流程非常简单. 简单的使用流程, 意味着许多的工作都是 Lottie 帮助完成了的.

下面就各个流程进行分析.

1 加载动画文件

加载动画文件的典型方式是: let animation = Animation.named("LottieLogo2", subdirectory: "TestAnimations").

其中的加载流程也非常简单:

1. 从 bundle 中读取相关 JSON 文件

2. 判断 animationCache 中是否存在该文件对应的动画(cache 中的 key 就是动画文件在bundle中的完整路径), 如果有, 直接返回该动画对象.

3. 将动画 JSON 文件解码为 Animation 对象, 方法就是 JSONDecoder().decode.

4. 如果有 animationCache 对象, 就把这个动画对象保存到该对象内, 这样下次就不再进行读取.

5. 返回 Animation 对象.

后续

后续流程简化为: 把动画容器 Layer 设置到视图上, 在容器 Layer 上执行线性动画, 在线性动画驱动下, 子图层对自身进行重绘, 从而形成动画效果. 这样的过程十分高效, 最主要的内容是去看一些子图层的实现, 因为子图层的绘制才是动画的核心!