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

Lottie 简介

Lottie正好下两单月的时节,我们正好想搜寻一个而扩大的方案支持项目之2D帧动画需求,同事介绍下调研了Lottie。看官网Demo里各种酷炫的矢量动画,瞬间受惊艳到。想象一下平常形容复杂动画的惨痛:
一堆hard code,
被设计师各种追在调参数看作用。还有更扑朔迷离的面动画,可能就是直上GIF,可使用
Gif 占用空间比较生,而且要呢各种屏幕尺寸、分辨率做适配,因为 Android
没有提供原生 Gif 的 api
支持,所以这种方案还见面遇上兼容性问题。另一样栽是用帧动画,但是帧动画占用空间比较
Gif 还要充分之差不多,也要做适配。所以Lottie就登台了。

screens_1

2017/12 海口

跌中的机算低旋到能看清陆地的可观,舷窗外或者暗一片,乌云安分地存聚在,窗外连海滨都无起就径直切换成高速公路。

诸如此类的落地一点庆典感都没有。

地面上点缀着很多黄泥塘,平房屋顶也灰头垢面。我忽然想到上中学时,海南因“国际旅游岛”的建设口号而地产大热。今天打空中俯瞰这片土地,又觉得世道难常。直到落地,在抵大厅看到举着彩色广告牌接机看房团的中介等,我又再次当,国家建设海南岛底风仍以吹在。

作一个应届生,内心其实是把出差当娱乐的(已经于顶多职场老油条嘲笑naive)。这次上头通知得不得了仓促,我赶紧走出差公文流程,然而IT系统没会联接上规章制度,搞得同事们为是抱头抓狂。中午于T1过检查,飞海南跟广西之司乘人员于带及特定的季革除队伍。经历了最严标准的安检,发胶被打开,安检员用化学课上嗅氨水的姿态鉴别里面的线索;脱鞋安检,结果让报告X光机监测左右星星独自鞋子监测不平等,让自身抽出鞋垫自证清白。

已交饭点,两各类女同事给北京之领导远程操作压以案头写新闻稿,我和另外一个男同事不厚道地先走一步去吃牛蛙。边吃边说物价真便宜,清桌了还不曾饱腹,又直白杀至一旁一寒宾馆吃虾子。出来吹着22℃的歌谣,走上前药房。收银姑娘将好的手机推向我们说,双12优先扫我出宝领独红包吧。

(原本决心要定居海外)的同事感叹道,我便生活于海口竟了。

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

2017/10 海口

其次糟糕来港凡带来在光荣使命的。结束了首在广西山区的抚慰活动,我们带来在些许各留守儿童及一致叫教职工来拘禁西。

那么次的天是标准的海岛模式,晴朗透彻。只是海口的海水还不如愿。琼州海峡对岸的沙土冲刷使得这里的水质不使南方的三亚。即便如此,孩子辈终身第一坏探望大海或者感动到颤抖。起初一个妹妹害羞地不愿意脱鞋子,被我们几乎胡怂恿,才怯怯地光脚踩入沙子。我坐在沙滩末端的台阶上看他俩玩了同一下午享有孩子辈还疼爱的沙滩把打。

身边的同事耐不停歇看西的无聊,放平篇歌唱给自家放任,让自己猜测歌手。她自傲地声称,从来不曾一个口能够猜测出来。结果自己放任了几乎句子,就径直击中是黄渤。她重新俗了。

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)。

2015/04 三亚

寻常钻在宿舍的上午,我刷到了北京市往来三亚16片含税(连燃油费都出bug没有终止)的机票,立马鼓动舍友和自身共运动。走不了吗就算损失顿午饭钱。舍友思考了一晃,觉得还是未克翘课。我就不理他,订上了单人票。

4月份的科目其实早已进来重点基本讲了的阶段,加之自己院开通的学风,说走就走真不是起难事。等自己当凤凰机场换上短袖,我才察觉及当时是自个儿大学第一不善(也是唯一一糟糕)翘课了。

七找八拐找到了藏于别墅区的青旅,我受到了哈尔滨老板热情之招待,甚至祭出了刚宗红肠。这家青旅的故事在斯不表明,以后得专程开文写写“三亚泽奇”。来海南职置业的,除了温州炒房团,有特别怪一些自东北。我臆测,除了国家口号及钱景,他们是虔诚地让阳光吸引而来。

师妹送我抢底镜子在自身一个不小心的趔趄里为外来浪卷走。顶在600°近视,我查找着移动上前附近人声鼎沸的社区,奇迹般找到同样家眼镜店。等自家更出来,跃入清晰的社会风气,就开心地走向清补凉的档口。

那种没有包袱的小日子就好。

从而明天我若错过吃清补凉。

庖丁解牛: 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/