移动端帧动画神来之笔 Lottie (iOS:从Json到Animation)Airbnb 开源动画库 Lottie 介绍与详细示例。

by admin on 2018年10月26日

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. 支撑动画属性多:比从脸书的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

  • 下载
    bodymovin压缩文件
  • 解压文件,在目 ‘/build/extension’ 找到 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-git
  • lottie-android-git
  • lottie-react-native-git

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的音。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图