前沿

该文章主要介绍了 Lottie是什么，如何为 Lottie 制作动画，以及 Lottie的应用场景。适合设计师和开发者阅读以及结对实践。

Lottie 介绍

Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。Lottie 目前只支持渲染播放 After Effects 动画。 Lottie 使用从 bodymovin (开源的 After Effects 插件)导出的json数据来作为动画数据。所以从动画制作到动画使用的整个工作流程如下：
开发操作指南 - 图1
此图引用自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 制作动画

为 Lottie 制作动画，需要： After Effects + bodymovin。After Effects制作好动画后，通过插件 bodymovin 导出一份 json文件，然后使用 Lottie 进行渲染播放。下面将会介绍如何安装该插件以及如何导出json文件。

安装 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 。但是，建议负担的起的童鞋还是购买正版服务，始终可以得到各种升级服务。

安装 After Effects 插件 bodymovin

1. 下载插件 bodymovin.zxp

2. 安装插件

  • 下载 After Effects 插件安装器 ZXP Installer（有 Windows 和 Mac 版本）
  • 运行 ZXP Installer，按照指示拖动bodymovin.zxp 到其窗口，即可安装完成
    开发操作指南 - 图2
    拖动安装bodymovin.zxp.png
    安装成功后，如图所示：

开发操作指南 - 图3
bodymovin.zxp安装成功.png
3. 重启 After Effects，然后修改 AE 的设置，在 ‘After Effects CC -> Preferences -> General’ 中打开
‘Allow Scripts to Write Files and Access Network’
开发操作指南 - 图4
打开 ‘Allow Scripts to Write Files and Access Network’.png
现在可以开始制作你的动画了，制作完毕后，需要使用 bodymovin 时，前往 ‘window -> extensions’ 即可找到 bodymovin：
开发操作指南 - 图5
bodymovin.png

使用 After Effects 制作动画

开发操作指南 - 图6
此处请开始你的表演~

使用 bodymovin 导出 json文件

当动画制作完毕后，运行 bodymovin，选择你要导出的动画，以及保存json文件的目录，点击 ‘Render’ 即可导出，具体流程如图所示：
开发操作指南 - 图7
导出 json文件流程.png

在线预览动画效果

制作好 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平台为例）
开发操作指南 - 图8
启动(splash)动画.gif
开发操作指南 - 图9
上下拉刷新动画.gif
开发操作指南 - 图10
加载(loading)动画+提示(tips)动画.gif
开发操作指南 - 图11
按钮(button)动画+礼物(gift)动画.gif
开发操作指南 - 图12
转场动画.gif

接入 Lottie

制作好动画，导出json文件后，iOS、Android、React Native的开发者们就可以像使用静态资源一样使用动画了。接入教程可以看官网教程或者 各平台的 Lottie 项目的github：

lottie-ios 极速上手手册

安装 Lottie

可通过 Cocoapods 或者 Carthage 导入 Lottie。

  • Cocoapods：pod 'lottie-ios'

  • Carthage： github "airbnb/lottie-ios" "master"

    加载 Lottie 动画

    Lottie 动画支持从本地或者服务器的json文件加载。

    1. //从本地json加载
    2. LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"];
    3. //从本地指定的bundle的json加载
    4. LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
    5. //从服务器的json加载
    6. LOTAnimationView *animationView = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL_TO_JSON]];
    7. animationView.frame = CGRectMake(20, 20, 400, 300);
    8. [self.view addSubview:animationView];

    播放 Lottie 动画

    Lottie 动画的播放控制，除了常规的控制，还支持进度播放、帧播放。

  • 播放、暂停、停止

    1. LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Lottie"];
    2. //从上一次的动画位置开始播放
    3. [animationView play];
    4. ...
    5. //暂停动画播放
    6. [animationView pause];
    7. ....
    8. //停止动画播放，此时动画进度重置为0
    9. [animationView stop];

  • 控制进度播放：可参考示例的上下拉刷新动画

    1. LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"RefreshHeaderAnim"];
    2. //直接播放到指定进度
    3. [animationView playToProgress:0.8 withCompletion:^(BOOL animationFinished) {
    4. // do something
    5. }];
    6. //从进度A播放到进度B
    7. [animationView playFromProgress:0 toProgress:0.8 withCompletion:^(BOOL animationFinished) {
    8. // do something
    9. }];
    10. //直接设置当前进度
    11. animationView.animationProgress = currentProgress;

  • 控制帧播放：可参考示例的switch按钮动画

    1. LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Switch"];
    2. //直接播放到指定帧
    3. [animationView playToFrame:@(40) withCompletion:^(BOOL animationFinished) {
    4. }];
    5. //从A帧播放到B帧
    6. [animationView playFromFrame:@(20) toFrame:@(40) withCompletion:^(BOOL animationFinished) {
    7. }];

  • 循环播放动画：可参考示例的Play-Pause按钮动画

    1. LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"Play-Pause"];
    2. //设置循环播放
    3. animationView.loopAnimation = YES;
    4. //设置自动倒退播放
    5. animationView.autoReverseAnimation = YES;
    6. [animationView playFromFrame:@(90) toFrame:@(180) withCompletion:^(BOOL animationFinished) {
    7. }];

  • 编辑某帧的动画对象的属性：可参考示例的switch按钮动画

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

  • 要修改对象的属性，需要知道属性的路径（Keypath）。获取属性的路径的方法有：

    • 直接打印对象的所有层级属性，从日志中获取：
      [animationView logHierarchyKeypaths];
      开发操作指南 - 图13
      logHierarchyKeypaths日志.png
    • 通过AE文件获得：Background 2.Shape 1.Fill 1.Color
      开发操作指南 - 图14
      Keypath.png
  • 视图控制器转场动画（View Controller Transitions）：可参考示例的转场动画
    Lottie 提供了 LOTAnimationTransitionController生成 id <UIViewControllerAnimatedTransitioning> 对象。 ```

    pragma mark - UIViewControllerTransitioningDelegate

  • (nullable id )animationControllerForPresentedController:(UIViewController )presented presentingController:(UIViewController )presenting sourceController:(UIViewController *)source {

    LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@”vcTransition1”

    1.                                                                                                          fromLayerNamed:@"outLayer"
    2.                                                                                                            toLayerNamed:@"inLayer"
    3.                                                                                                 applyAnimationTransform:NO];

    return animationController; }

    • (nullable id )animationControllerForDismissedController:(UIViewController )dismissed { LOTAnimationTransitionController animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@”vcTransition2”
      1.                                                                                                        fromLayerNamed:@"outLayer"
      2.                                                                                                          toLayerNamed:@"inLayer"
      3.                                                                                               applyAnimationTransform:NO];
      return animationController; }
      1. <a name="gACv9"></a>
      2. #### 添加视图到 Layer 层：可参考“添加 View 到 Layer 示例”
      3. Lottie 除了支持动画播放，还支持添加自定义的视图到指定的 Layer ：<br />![](https://cdn.nlark.com/yuque/0/2019/webp/88231/1562989339698-450368f1-7eb1-4228-9e97-8918540f31d6.webp#align=left&display=inline&height=686&originHeight=686&originWidth=372&size=0&status=done&width=372)<br />添加视图到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的值的正负，具体如图所示：

开发操作指南 - 图15
Shape Layer坐标系统.jpg
在上面演示的Gif图中，Shape Layer 1、Shape Layer 2、Shape Layer 3、Shape Layer 4的坐标原点都在图层中心位置，不同的是其X轴和Y轴的正方向位置。感兴趣的同学，可以下载打开 Demo 里的 RectComp.aep 文件，查看对应 Layer 的坐标系统数据，然后你也可以尝试编辑修改对应图层的坐标原点位置和XY轴方向，导出动画数据进行试验。
总得来说，若你要添加视图到Layer，在添加前，最好打开AE文件，查看对应的 Layer 的坐标系统信息。当然，更好的做法还是和AE设计师结对开发动画，这样可以更方便知道各个Layer的信息。

作者：York_魚
链接：https://www.jianshu.com/p/01f6bb509d54
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。