lottie

1.Lottie是什么
Lottie是Airbnb开源的一个支持iOS,Android,React Native和Web的动画库,我们可以使用设计师导出来的json文件快速实现动画效果.

2.如果我们想要实现下列动画

我们使用现有技术会遇到的问题：
1.每一帧都是一张图片，文件过于庞大。

2.不同分辨率设备的适配存在不便。

3.Gif格式的色深问题无法解决。

4.想要在线获取动画成本比较高。

替代方案:
现在可以使用开源的Lottie动画库来实现相应效果。

UI需要做的是，通过AE生成动画，然后使用bodymovin插件导出json和sourse(非必须)文件即可。

对比gif和json的大小及清晰度区别:

上面的方案:原始518k,压缩后514k

下面的方案:原始29k,压缩后5k

3.使用方法
1.直接添加一个动画视图

2.switch类控件

3.转场动画
支持协议即可,在回调中使用动画

4.代码结构
LOTAnimationView

继承自LOTView,也就是UIView,主要是封装了一些动画的操作

LOTComposition（动画数据）

用于解析动画的json文件，获取整个动画数据

LOTLayerGroup（Layer动画组）

解析json文件中的"layers" 层的数据返回所有LOTLayer 集合

LOTLayer

解析获得json文件中的每一个layer数据具体详情

更多结构示意

5.注意事项
• 如果使用了素材, 那么素材图片的每个像素都会直接加载进内存, 并且是不能释放掉的, 所以, 如果是一些小图片, 加载进去也还好, 但是如果是整页的启动动画, 不拆分一下素材, 可能一个启动页所需要的内存就是50MB以上. 如果不使用素材, 而是在AE中直接绘制则没有这个问题.

• 如果使用的PS中绘制的素材, 在AE中做动画, 可能在动画导出的素材中出现黑边, 解决办法是将素材拖入PS去掉黑边, 同名替换.

• 拆分素材的办法是将一个动画中静态的部分直接切出来加载, 动的部分单独做动画

• 如果一个项目中使用了多个Lottie的动画, 需要注意Json文件中的路径及素材名称不能重复, 否则会错乱

• Lottie先天就支持播放式动画, 对于交互式动画有个animationProgress的属性

4.其他
图片的另一种形式-矢量图

导入工程的方式:

1.简单使用
与 PNG 格式的图片一样，在 Xcode 中把 PDF 格式的矢量图拖进 *.xcassets (默认是 Assets.xcassets) 文件夹中，然后用不带后缀(.pdf)的文件名生成 UIImage

imageView.image = [UIImage imageNamed:@“Vector”];

注意，如果以上代码用 “Vector.pdf”，无法得到 UIImage。

这样做的话，Xcode 会在编译时根据 PDF 图的大小生成 @1x、@2x、@3x 的 PNG 图片，与使用 PNG 图片的显示效果相同。如果把图片放大到超过 PNG 图片的大小，则会显示模糊的图片。没有发挥矢量图可以任意调整大小的优点。

2.改变矢量图大小
如果需要改变矢量图大小并且保持清晰度，那就要解析 PDF 源文件，把矢量图绘制成所需大小的位图(Bitmap)。YHPDFImageLoader 库就实现了这个功能，并且可以选择拉伸图片时是否保持原图宽高比，还添加了内存和磁盘缓存。这里的 PDF 文件放在工程目录中，与 .m、.h 文件一样,可以放在bundle，不能放在 *.xcassets 里。

矢量图加入工程中的优点

1.APP 瘦身
对比一下某个图标的一套常规的 PNG 图片和 PDF 类型的图片的大小：

网络资源
PDF 文件大小为 7KB

PNG 三个文件合计大小为 85KB

这里的PNG图片还可以压缩,压缩后可能会有较大幅度变更.

2.便于维护
方便后续的不同scale变化,不必要使用4x,5x等尺寸

3.可以无限放大
在文件大小固定的情况下可以无限放大,更加节省空间

其他工具 - PaintCode
代码直接将SVG文件转换成iOS代码,可以放到drawRect中实现纯代码绘制相应UI样式