将其分析为原生代码,Lottie动画库首要由五个部分构成

Lottie动画库主要由两个部分组成,将其解析为原生代码

Lottie 简介

Lottie刚出来八个月的时候,大家正好想搜寻3个可增添的方案帮忙项目标2D帧动画需要,同事介绍下调研了Lottie。看官网Demo里各类酷炫的矢量动画,弹指间被惊艳到。想象一下日常写复杂动画的悲苦:
一堆hard code,
被设计师各类追着调参数看成效。还有更复杂的平面动画,可能就间接上GIF,可利用
Gif 占用空间较大,而且亟需为各样显示屏尺寸、分辨率做适配,因为 Android
没有提供原生 Gif 的 api
支持,所以那种方案还会际遇兼容性难题。另一种是用帧动画,然而帧动画占用空间比
Gif 还要大的多,也亟需做适配。所以Lottie就上台了。

screens_1

Airbnb 宣布的 Lottie 是贰个面向 iOS、Android 和 React Native
的开源动画库。可以向来利用 AE 导出的 JSON
动画文件,将其分析为原生代码,并跨平台运维在设备上。八个 JSON
文件可以而且复用于 iOS 和 Android
,免去了动画重复支付完毕,并且还原度都相比较高。

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

图片 1

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

示例动画.gif

左右逢源: Lottie iOS 的落到实处

Lottie动画库首要由五个部分构成:解析渲染

图片 2

解析

复杂的AE动画用bodymoving导出后,其复杂的图层关系、动画属性都会炫耀到一串Json中。Lottie第3步要做的就是将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(图层组),是3个图层数组
。全体酷炫动画拆解后只是只是差异图层、不一样属性在同等时刻的更动效果。
对应AE软件,图层数据模型纪录了一部分质量帧动画音讯,比如属性动画位移(position)、缩放(scale)、发光度(opacity)、旋转(rotation)音讯。那几个音信被分析后存储在局地属性类里,存开始时间、甘休时间、帧率、插值用的某帧对应的值、时间函数等。用他们向来社团iOS
Core Animation 动画对象。

比如那边有个卡通,内圆点有光滑度渐变动画(由0到1,再从1到0),导出后属性动画都在”ks”字典中,其中发光度又在“o”那几个字典中。Lottie解析后Layer会存2个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

示例动画.gif

渲染

剖析好图层结构数据和动画参数, Lottie-iOS调用Core
Animation
建图层数和卡通渲染。整个视图有二个叫_childContainerLayer的图层作为容器图层,也是图层树的根节点,先河根据数量往上添加子Layer.
比如上边例子的卡通,
有3个合成,1个图层。营造图层树时,先依照LOTComposition模型数据创设LOTCompositionLayer对象,作为第壹身材图层;然后LOTCompositionLayer
再依据LOTComposition中的layers数组创造对应的LOTLayerView图层1个。

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

怎么大家会选择lottie动画

使用中的痛点:

  1. 支撑AE动画属性有限,有的AE动画效率bodymoving无法导出,还有局地通病bodymoving导出的矢量动画无法支撑。比如没有看到扶助阴影的机能
  2. 稍稍矢量动画 ,对设计师的渴求相比较高。而且蛮多设计师不会动用AE。

① 、从代码上看,Android 端的完结是依照 Drawable、iOS 端是基于 Layer ——
最终都以对 canvas 的操作,中间除去解析 json 外,基本无用度品质的作为。

能源网站

https://www.lottiefiles.com/

二 、从存储上,动画由 json 文件讲述,占用空间不多,基本可以替代用 GIF
做动画。

叁 、因为动画由 json 文件讲述,所以它的第多少个亮点是卡通片的换代及其方便。

四 、AE导出Json文件,Lotti 解析Json文件后调Core
Animation的API绘制渲染。复杂的帧动画那样完结还原度更好,开发费用更低。

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

陆 、Lotti对于从AE导出的Json文件,用Core Animation做矢量动画,
质量较佳。Lotti 对分析后的数据模型有内存缓存。

七 、灵活便捷的API: 控制动画进程、播放、暂停。

⑧ 、Lottie 的 API 中融为一炉了成百上千很棒的意义:它帮忙通过互连网加载 JSON
文件,那对 A/B
(对照试验)测试方案尤其有效;有可选的缓存机制,能协理调用缓存中的动画;动画的速度、相关联的手势都得以透过简单的参数来决定;甚至
iOS 中还协助在 Runtime 中添加额外的原生 UI ,从而已毕复杂的联网动画。

或者存在的难题

壹 、由于Bodymovin 插件的题目,有一些 AE 效果无法成功导出;

二 、Lottie 对 json 文件的帮助待完善,有一对json
文件的功效在运动端上无法很好的突显;

怎么样导出Json文件?

图片 3

流程图.jpg

动用Lottie库播放动画
一 、将Json文件拖入大家的工程中
2、API操控

@interface LottieRootViewController () 

// lottie动画视图
@property (nonatomic, strong) LOTAnimationView *lottieLogo;

@end

@implementation LottieRootViewController

- (void)viewDidLoad {
  [super viewDidLoad];
// animationNamed: 动画的Json文件名称
  self.lottieLogo = [LOTAnimationView animationNamed:@"LottieAnimation"];
  self.lottieLogo.contentMode = UIViewContentModeScaleAspectFill;
  self.lottieLogo.frame = CGRectMake(0, 0, self.view.bounds.size.width,      self.view.bounds.size.height * 0.3);
  [self.view addSubview:self.lottieLogo];
}

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
// 播放动画
  [self.lottieLogo play];
}

- (void)viewDidDisappear:(BOOL)animated {
  [super viewDidDisappear:animated];
// 暂停动画
  [self.lottieLogo pause];
}

部分API接口

// Json动画名称
+ (instancetype)animationNamed:(NSString *)animationName;
// 网络加载 JSON 文件
- (instancetype)initWithContentsOfURL:(NSURL *)url;
// 循环播放
@property (nonatomic, assign) BOOL loopAnimation;
// 动画进度
@property (nonatomic, assign) CGFloat animationProgress;
// 动画速度
@property (nonatomic, assign) CGFloat animationSpeed;
// 动画持续时间
@property (nonatomic, readonly) CGFloat animationDuration;
// 播放完成回调
- (void)playWithCompletion:(LOTAnimationCompletionBlock)completion;
// 播放
- (void)play;
// 暂停
- (void)pause;

转场动画

/**

 @param animation The name:动画名称

 @param fromLayer The name :自定义层掩盖fromVC

 @param toLayer The name :自定义层掩盖toVC

 */
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];

要想更加多的感触lottie动画的魔力,大家先一起去探究AE吧~~