Lottie
是Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的动画库。具体内容可以见github。
通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.
在此不多做解释可以去github看使用以及支持。
github地址：https://github.com/airbnb/lottie-ios
本文重点在解析动画以及动画库。
1） 首先是动画定义
每帧图像都是由人工或计算机产生的。根据人眼的特性，用15帧/秒~20帧/秒的以上速度顺序地播放静止图像帧，产生运动的感觉的图像。
2）动画形成原理：
是因为人眼有视觉暂留的特性所谓视觉暂留就是在看到一个物体后即时该物体快速消失也还是会在眼中留下一定时间的持续影像。
<1>下面我们了解几个名词（对没错，让你自己去搞明白，我就不和你说了）
1）FPS ( Frames Per Second)
2）逐帧（Frame By Frame）
3）关键帧（Keyframe Animation）
3）以iOS为例谈一谈Core Animation：
Core Animation结构
🔍 核心动画类有以下分类:提供显示内容的图层类。动画和计时类。布局和约束类。事务类，在原子更新的时候组合图层类。
图层类是核心动画的核心基础，它提供了一套抽象的概念，CALayer 是整个图层类的基础，它是所 有核心动画图层类的父类。 和视图类(NSView 或 UIView)一样,CALayer 有自己的父图层类,同时也拥有自 己子图层类的集合，它们构成了一个图层树的层次结构。图层绘制类似视图一样自底 向上，并指定其几何形状相对他们 superlayer，创建一个相对的局部坐标系。然而图 层类通过合并变换矩阵允许你旋转、偏移、拉伸对应的图层内容。
🔍 核心动画的动画类使用基本的动画和关键帧动画把图层的内容和选取的属性动 画的显示出来。所有核心动画的动画类都是从 CAAnimation 类继承而来。CAAnimation 实现了 CAMediaTiming 协议，提供了动画的持续时间，速度，和重复计数。 （关于CAMediaTiming可以看图）
Core Animation classes and protocol
CAAnimation 也实现了 CAAction 协议。该协议为图层触发一个动画动作提供了提供 标准化响应。
动画类同时定义了一个使用贝塞尔曲线来描述动画改变的时间函数。例如，一个 匀速时间函数(linear timing function)在动画的整个生命周期里面一直保持速度不变， 而渐缓时间函数(ease-out timing function)则在动画接近其生命周期的时候减慢速度。
核心动画额外提供了一系列抽象的和细化的动画类，比如:
CATransition 提供了一个图层变化的过渡效果，它能影响图层的整个内容。 动画进行的时候淡入淡出(fade)、推(push)、显露(reveal)图层的内容。这些过渡效 果可以扩展到你自己定制的 Core Image 滤镜。
🔍 CAAnimationGroup 允许一系列动画效果组合在一起，并行显示动画。
🔍 CAPropertyAnimation 是一个抽象的子类，它支持动画的显示图层的关键路 径中指定的属性
🔍 CABasicAnimation 简单的为图层的属性提供修改。 CAKeyframeAnimation 支持关键帧动画，你可以指定的图层属性的关键路径
🔍 动画，包括动画的每个阶段的价值，以及关键帧时间和计时功能的一系列值。在 动画运行是，每个值被特定的插入值替代。
🔍 CATransaction 是核心动画 里面负责协调多个动画原子更新显示操作。事务支持嵌套使用。 核心动画支持两种事务:隐式事务和显式事务。在图层的动画属性被一个线程修 改，同时该线程下次迭代的时候自动提交该修改的时候隐式事务自动创建。显式事务 发生在程序在修改动画属性之前给 CATransaction 发送了一个开始消息，在动画属性 修改之后提交该消息。
<2> Lottie库介绍。
1）类结构
Lottie类结构
2）流程概述
里面有两点简单说一下。
一、cache是最少使用原则，利用NSDictionary和NSarray实现，最多存50个json数组
二、是动画合成过程，解析json数组每个数组生成相应的layer组合layer生成完整动画。
流程概述.png
<3>性能测试
1）CPU波动和帧动画对比会差一些
CPU波动
2）内存占用会有一定优势
内存占用
3）解析普通动画耗时大概在0.03秒左右，比较理想。
所以综上 Lottie可用性还是不错的。
网友评论