走端帧动画神来之笔 Lottie (iOS:从Json到Animation)

Lottie 简介

Lottie凑巧出两只月之时,我们正好想找一个但扩大的方案支持项目的2D帧动画需求,同事介绍下调研了Lottie。看官网Demo里各种酷炫的矢量动画,瞬间叫惊艳到。想象一下平常写复杂动画的痛苦:
一堆hard code,
被设计师各种追在调参数看效能。还有再扑朔迷离的面动画,可能就直上GIF,可运
Gif 占用空间比较生,而且要呢各种屏幕尺寸、分辨率做适配,因为 Android
没有供原生 Gif 的 api
支持,所以这种方案还会赶上兼容性问题。另一样种植是用帧动画,但是帧动画占用空间比较
Gif 还要好之大半,也需要开适配。所以Lottie就上台了。

screens_1

Lottie做什么?

使用Lottie开发的流水线是:
设计师在AE中筹划成就你的卡通,通过bodymoving插件导出纪录动画信息的JSON文件,然后开发人员使用
Lottie 的Android,iOS,React Native apps开源动画库读取这卖JSON文件,
解析动画结构及参数信息并渲染。

image.png

连锁工具:

  • Adobe AE CC 2017版本
  • ZXP
    installer
    AE插件安装工具,先安装是。
  • bodymovin
    AE动画导出为JSON文件之插件。

    • 下载ZIP文件,解压得到bodymovin.zxp
    • 打开ZXP in staller, 将bodymovin.zxp拖进去安装。
    image.png

Lottie的优点

  1. 筹虽所展现: 设计师用AE设计好动画后直导出Json文件,Lottie
    解析Json文件后调Core
    Animation的API绘制渲染。还原度更好,开发成本更低。

  2. 跨平台: 支持iOS、Android、React Native。

  3. 特性:Lottie对于自AE导出底Json文件,用Core Animation做矢量动画,
    性能于理想。Lottie
    对分析后的数据模型有外存缓存。但是对多图帧动画,性能于差。

  4. 支撑动画属性多:比打脸书的Keyframes,Lottie支持了重多AE动画属性,比如Mask,
    Trim Paths,Stroke (shape layer)等。

  5. 担保大小,相比动辄上百K的帧动画,Json文件包大小很有些。有图表资源的情形下,同一布置图也得以于多独图层复用,而且运行时内存中只出一个UIImage对象(iOS)。

庖丁解牛: Lottie iOS 的兑现

Lottie动画库主要出于少数个组成部分组成:解析渲染

解析

复杂的AE动画用bodymoving导出后,其复杂的图层关系、动画属性都见面照到同样失误Json中。Lottie第一步而做的饶是以data.json中的结构化数据解析成对应之模型类。
遵循:AffterEffect新建项目时新建一个合成,
Composition需要指定由始帧时间,终止时 ,帧率:

导出成data.json后,对应的字段:

代码里LOTComposition模型类对应的性能:

@property (nonatomic, readonly) NSNumber *startFrame;   // 起始帧
@property (nonatomic, readonly) NSNumber *endFrame;     // 结束帧
@property (nonatomic, readonly) NSNumber *framerate;    // 帧率

脚是Lottie里大概的数据模型类涉图:

image.png

LOTComposition是一体数据模型,有接触像个雅画布。它起总体性assetGroup(资源)
。如果AE动画来因此到png图片,bodymovin导出的公文后,image文件夹下会出对应之png图片
。每张图的音信抽象在一个LOTAsset靶里,主要性能是本地路径(供加载用)、referenceID(跟对应图层做涉嫌)
LOTComposition对象还有一个性能是,layerGroup(图层组),是一个图层数组
。所有酷炫动画拆解后可只是不同图层、不同属性在同时刻的转移效果。
对应AE软件,图层数据模型纪录了有些性质帧动画信息,比如属性动画位移(position)、缩放(scale)、透明度(opacity)、旋转(rotation)信息。这些信息给解析后存储于有的属于性类里,存初始时间、结束时、帧率、插值用底某帧对应之价值、时间函数等。用他们一直组织iOS
Core Animation 动画对象。

比如此地发出只卡通,内圆点有透明度渐变动画(由0到1,再打1到0),导出后属性动画都当”ks”字典中,其中透明度又以“o”这个字典中。Lottie解析后Layer会存一个LOTAnimatableNumberValue目标,纪录动画信息。如下图:

7月-19-2017 15-14-46.gif

image.png

这些性动画数据以Lottie里还为此接近的靶子存着,并提供了转账为CAKeyframeAnimation的接口。

image.png

如若齐类图,LOTLayer
还有叫shapes的反复组,存了平等堆LOTShapeGroup对象,这什么啊?其实是当AE中发出个Shape的定义,是颜色、形状、透明度、等有性能的组合.

还是点很动画也例,内圆点相及颜色以 ae属性和json文件表示:

image.png

image.png

渲染

解析好图层结构数据和动画片参数, Lottie-iOS调用Core
Animation打图层数和卡通片渲染。整个视图有一个给_childContainerLayer的图层作为容器图层,也是图层树的到底节点,开始根据数量向上加加子Layer.
比如上面例子的动画片,
有1只合成,2只图层。构建图层树时,先根据LOTComposition模型数据创建LOTCompositionLayer对象,作为第一个头图层;然后LOTCompositionLayer
再依据LOTComposition中的layers数组创建对应之LOTLayerView图层2个。

image.png

里面LOTLayerView会负责,用事先解析出的性质动画对象,构建动画组CAAnimationGroup。

  NSMutableDictionary *keypaths = [NSMutableDictionary dictionary];
  if (_layerModel.opacity) {
    [keypaths setValue:_layerModel.opacity forKey:@"opacity"];
  }
  if (_layerModel.position) {
    [keypaths setValue:_layerModel.position forKey:@"position"];
  }
  if (_layerModel.anchor) {
    [keypaths setValue:_layerModel.anchor forKey:@"anchorPoint"];
  }
  if (_layerModel.scale) {
    [keypaths setValue:_layerModel.scale forKey:@"transform"];
  }
  if (_layerModel.rotation) {
    [keypaths setValue:_layerModel.rotation forKey:@"sublayerTransform.rotation"];
  }
  if (_layerModel.positionX) {
    [keypaths setValue:_layerModel.positionX forKey:@"position.x"];
  }
  if (_layerModel.positionY) {
    [keypaths setValue:_layerModel.positionY forKey:@"position.y"];
  }

  _animation = [CAAnimationGroup LOT_animationGroupForAnimatablePropertiesWithKeyPaths:keypaths];

  if (_animation) {
    [_childContainerLayer addAnimation:_animation forKey:@"LottieAnimation"];
  }

当时是渲染相关的类简图:它还支持mask跟裁剪等任何力量。

image.png

以受到的痛点:

  1. 支持AE动画属性有限,有的AE动画作用bodymoving无法导出,还有一对弱点bodymoving导出的矢量动画无法支撑。比如没有看到支持阴影的职能
  2. 稍微矢量动画 ,对设计师的渴求较高。而且死多设计师不见面用AE。

资源网站

https://www.lottiefiles.com/

相关文章