利用Lottie开发的流水线是,怎么样为 Lottie 制作动画

Lottie 简介

Lottie刚出去多少个月的时候,大家正好想寻找一个可扩张的方案帮衬项目标2D帧动画要求,同事介绍下调研了Lottie。看官网Demo里种种酷炫的矢量动画,刹那间被惊艳到。想象一下平日写复杂动画的愁肠:
一堆hard code,
被设计师各个追着调参数看成效。还有更扑朔迷离的平面动画,大概就平素上GIF,可利用
Gif 占用空间较大,而且亟需为各类显示屏尺寸、分辨率做适配,因为 Android
没有提供原生 Gif 的 api
援救,所以那种方案还会碰到兼容性难题。另一种是用帧动画,但是帧动画占用空间比
Gif 还要大的多,也亟需做适配。所以Lottie就登台了。

screens_1

前沿

该文章首要介绍了 Lottie是什么,怎么着为 Lottie 制作动画,以及
Lottie的采用场景。适合设计师和开发者阅读以及结对实践。


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 介绍

Lottie 是 Airbnb 开源的一个卡通渲染库,同时扶助 Android、iOS、React
Native 平台。Lottie 近期只协助渲染播放 After Effects 动画。
Lottie 使用从
bodymovin
(开源的 After Effects
插件)导出的json数据来作为动画数据。所以从动画制作到动画使用的整套工作流程如下:

此图引用自http://cdn.trojx.me/blog\_pic/lottie\_sum.png

  1. 设计师接纳 After Effects 制作动画,并导出json文件给开发者
  2. 各端的开发者通过 Lottie 渲染播放动画

终结方今,各平台的 Lottie 协助的 After Effects 性情可从下面网页得到:

http://airbnb.io/lottie/supported-features.html

就此,设计师在选择 After Effects
制作动画时,提出先预览上述网页,以领悟应该使用什么特色制作动画,因为若选拔Lottie 还不接济的性状,如3D图层,则 Lottie 会无法正确渲染。

为了推广Lottie,Airbnb
还确立了一个Lottie动画网站,供网友分享温馨打造的动画片。网站地址为:

https://www.lottiefiles.com


Lottie的优点

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

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

  3. 性格:Lottie对于从AE导出的Json文件,用Core Animation做矢量动画,
    质量较佳。Lottie
    对分析后的数据模型有内存缓存。但是对多图片帧动画,质量比较差。

  4. 支撑动画属性多:比起Facebook的Keyframes,Lottie匡助了越来越多AE动画属性,比如Mask,
    Trim Paths,Stroke (shape layer)等。

  5. 包大小,相比较动辄上百K的帧动画,Json文件包大小很小。有图片资源的情况下,同一张图纸也足以被多个图层复用,而且运行时内存中唯有一个UIImage对象(iOS)。

为 Lottie 制作动画

为 Lottie 制作动画,要求: After Effects + bodymovin。After
Effects制作好动画后,通过插件 bodymovin 导出一份 json文件,然后使用
Lottie 举办渲染播放。下边将会介绍怎样设置该插件以及哪些导出json文件。

无往不利: Lottie iOS 的兑现

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

安装 After Effects

PS: 已经设置好 After Effects 的童鞋可以忽略此环节

After Effects
可以从Adobe官网下载安装试用,其目前贩卖价格为:3499¥/年,相对来说依然很贵的。对于负责不起的童鞋来说,也可以设想破解版本。以下是Mac
的破解版本的下载链接:

百度云盘:https://pan.baidu.com/s/1eRMCL26
领取密码:xyu5

下载的文本夹中富含安装文件After Effects CC 2017.dmg以及破解文件Adobe Zii cc2017.app压缩包。安装好
After Effects 后,解压运行Adobe Zii cc2017.app 即可免费应用 After
Effects
。不过,提议负担的起的童鞋仍然购买正版服务,始终可以获取种种升级服务。

解析

复杂的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

安装 After Effects 插件 bodymovin

1. 下载插件 bodymovin.zxp

2. 装置插件

  • 下载 After Effects 插件安装器 ZXP
    Installer
    (有
    Windows 和 Mac 版本)

  • 运行 ZXP Installer,根据指令拖动bodymovin.zxp
    到其窗口,即可安装完毕

    拖动安装bodymovin.zxp.png

    设置成功后,如图所示:

bodymovin.zxp安装成功.png

3. 重启 After Effects,然后修改 AE 的装置,在 ‘After Effects CC ->
Preferences -> General’ 中打开
‘Allow Scripts to Write Files and Access Network’

打开 ‘Allow Scripts to Write Files and Access Network’.png

近期得以伊始创设你的卡通了,制作完成后,必要使用 bodymovin 时,前往
‘window -> extensions’ 即可找到 bodymovin:

bodymovin.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

接纳 After Effects 制作动画

此间请早先你的上演~

选择中的痛点:

  1. 支撑AE动画属性有限,有的AE动画成效bodymoving不只怕导出,还有一对败笔bodymoving导出的矢量动画不或许支撑。比如没有看到协理阴影的效率
  2. 些微矢量动画 ,对设计师的须要相比较高。而且蛮多设计师不会采用AE。

使用 bodymovin 导出 json文件

当动画制作落成后,运行
bodymovin,采纳你要导出的卡通,以及保存json文件的目录,点击 ‘Render’
即可导出,具体流程如图所示:

导出 json文件流程.png

资源网站

https://www.lottiefiles.com/

在线预览动画效果

创设好 After Effects 动画,导出json文件,当然要证实一下 Lottie
能不能正确渲染播放了。

Airbnb 提供了 iOS
APP

Android
APP

以及 Lottie
动画在线预览网站

供设计师进行动画预览。

在网站预览的话,设计师只要把导出后的 json
文件,拖动到网页的预览框,即可在线收看 Lottie 渲染播放的动画效果。

运用 APP 预览的话,则要求上传 json
文件到服务端,通过链接举行预览。提出设计师上传文件到 Airbnb
建立的分享网站
lottiefiles.com


怎么着情形万分使用 Lottie?

Lottie
作为一个动画片渲染库,在追究进度中,作者以为其相比较适当化解以下场景的难点:

  • 启航(splash)动画:典型气象是APP logo动画的广播
  • 上下拉刷新动画:所有APP都必不可少的效应,利用 Lottie
    可以做的越发简约酷炫了
  • 加载(loading)动画:典型气象是网络请求的loading动画
  • 提示(tips)动画:典型场景是空白页的提示
  • 按钮(button)动画:典型场景如switch按钮、编辑按钮、播放按钮等按钮的切换过渡动画
  • 赠品(gift)动画:典型场景是直播类APP的高等级动画播放
  • 视图转场动画

各场景的演示如下:(以iOS平台为例)

启动(splash)动画.gif

上下拉刷新动画.gif

加载(loading)动画+提示(tips)动画.gif

按钮(button)动画+礼物(gift)动画.gif

转场动画.gif


接入 Lottie

创设好动画,导出json文件后,iOS、Android、React
Native的开发者们就足以像使用静态资源一样采纳动画片了。接入教程可以看官网教程大概各平台的 Lottie 项目的github:

lottie-iOS 的行使示范(包罗上述所有例子)可访问:
https://github.com/YK-Unit/LottieExample


lottie-ios 极速上手手册

安装 Lottie

可通过 Cocoapods 或者 Carthage 导入 Lottie。

  • Cocoapods:pod 'lottie-ios'
  • Carthage: github "airbnb/lottie-ios" "master"

加载 Lottie 动画

Lottie 动画协助从地点大概服务器的json文件加载。

//从本地json加载
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"];
//从本地指定的bundle的json加载
LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
//从服务器的json加载
LOTAnimationView *animationView = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL_TO_JSON]];

animationView.frame = CGRectMake(20, 20, 400, 300);
[self.view addSubview:animationView];

播放 Lottie 动画

Lottie 动画的播音控制,除了正规的决定,还帮忙进程播放、帧播放。

  • 播放、暂停、停止

    LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"];
    
    //从上一次的动画位置开始播放
    [animationView play];
    
    ...
    //暂停动画播放
    [animationView pause];
    
    ....
    //停止动画播放,此时动画进度重置为0
    [animationView stop];
    
  • 决定速度播放:可参看示例的上下拉刷新动画

    LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"RefreshHeaderAnim"];
    
    //直接播放到指定进度
    [animationView playToProgress:0.8 withCompletion:^(BOOL animationFinished) {
    // do something
    }];
    
    //从进度A播放到进度B
    [animationView playFromProgress:0 toProgress:0.8 withCompletion:^(BOOL animationFinished) {
    // do something
    }];
    
    //直接设置当前进度
    animationView.animationProgress = currentProgress;
    
  • 控制帧播放:可参看示例的switch按钮动画

    LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Switch"];
    
    //直接播放到指定帧
    [animationView playToFrame:@(40) withCompletion:^(BOOL animationFinished) {
    
     }];
    
    //从A帧播放到B帧
    [animationView playFromFrame:@(20) toFrame:@(40) withCompletion:^(BOOL animationFinished) {
    
    }];
    
  • 循环播放动画:可参看示例的Play-Pause按钮动画

    LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Play-Pause"];
    //设置循环播放
    animationView.loopAnimation = YES;
    //设置自动倒退播放
    animationView.autoReverseAnimation = YES;
    [animationView playFromFrame:@(90) toFrame:@(180) withCompletion:^(BOOL animationFinished) {
    
    }];
    
  • 编写某帧的卡通对象的属性:可参看示例的switch按钮动画

    [self.switchButton setValue:[UIColor orangeColor] forKeypath:@"Background 2.Shape 1.Fill 1.Color" atFrame:@(0)];
    [self.switchButton setValue:[UIColor blueColor] forKeypath:@"Background 2.Shape 1.Fill 1.Color" atFrame:@(13)]; 
    

    要修改对象的习性,需求知道属性的路子(Keypath)。获取属性的不二法门的法子有:

    • 一向打印对象的保有层级属性,从日记中获取:
      [animationView logHierarchyKeypaths];

      logHierarchyKeypaths日志.png

    • 通过AE文件得到:Background 2.Shape 1.Fill 1.Color

      Keypath.png

  • 视图控制器转场动画(View Controller
    Transitions):可参照示例的转场动画
    Lottie 提供了 LOTAnimationTransitionController生成
    id <UIViewControllerAnimatedTransitioning> 对象。

    #pragma mark - UIViewControllerTransitioningDelegate
    - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
    
         LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                                   fromLayerNamed:@"outLayer"
                                                                                                                     toLayerNamed:@"inLayer"
                                                                                                          applyAnimationTransform:NO];
         return animationController;
     }
    
     - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
         LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
                                                                                                                   fromLayerNamed:@"outLayer"
                                                                                                                     toLayerNamed:@"inLayer"
                                                                                                          applyAnimationTransform:NO];
         return animationController;
     }
    

添加视图到 Layer 层:可参照“添加 View 到 Layer 示例”

Lottie 除了帮忙动画播放,还协理添加自定义的视图到指定的 Layer :

添加视图到Layer层.gif

NSArray *layerNames = @[@"Green Solid 1",@"Shape Layer 1",@"Shape Layer 2",@"Shape Layer 3",@"Shape Layer 4"];
for (NSString *layerName in layerNames) {
    CGRect subRectViewFrame = CGRectMake(0, 0, 15, 15);
    UIView *subRectView = [[UIView alloc] initWithFrame:subRectViewFrame];
    subRectViewFrame = [self.rectView convertRect:subRectViewFrame toLayerNamed:layerName];
    subRectView.frame = subRectViewFrame;
    subRectView.backgroundColor = [UIColor whiteColor];
    [self.rectView addSubview:subRectView toLayerNamed:layerName applyTransform:YES];
}

在AE中,我们一般会用到2种类型的 Layer 来创设动画:Solid
Layer(固态图层)和 Shape
Layer(形状图层)。图中,藏蓝色的视图成分就是Solid
Layer,红色、藏紫色、灰色、肉色的视图成分就是 Shape Layer。

细心的读者可以窥见,添加同一个 subRectView 到 差其他 Layer ,subRectView
的绘图地点不平等,那是因为不相同品种的 Layer 其坐标种类不一样:

  • Solid Layer 的坐标原点在左上角职位,向右是X轴正方向,向下是Y轴正方向

  • Shape Layer
    的坐标原点由ShapeLayer-Contents-layer-AnchorPoint(内容图层的锚点地方)决定,X轴和Y轴的正方向则取决于其ShapeLayer-Transform-Scale的值的正负,具体如图所示:

Shape Layer坐标系统.jpg

在地点演示的Gif图中,Shape Layer 1Shape Layer 2Shape Layer 3Shape Layer 4的坐标原点都在图层要旨地点,不一样的是其X轴和Y轴的四方向地点。感兴趣的同窗,可以下载打开
Demo 里的
RectComp.aep
文件,查占星应 Layer
的坐标种类数据,然后你也可以品尝编辑修改对应图层的坐标原点地点和XY轴方向,导出动画数据举办考查。

总得来说,若你要添加视图到Layer,在丰裕前,最好打开AE文件,查六柱预测应的
Layer
的坐标体系音信。当然,更好的做法仍然和AE设计师结对开发动画,这样可以更方便清楚种种Layer的音信。

相关文章