工作中，你可能经常会遇到以下场景：

场景一：

设计：这是动画的demo和参数标注图，你看一下。

开发：好的没问题。

一段时间后……

开发：动画效果实现出来了，你走查一下。

设计：这里速率不对，这里弹出的效果有点生硬，这里……

场景二：

设计：这里的页面转场需要一个动画，这是demo。

产品：啊！当时提需求单的时候没说这里要加动画，我给开发评估一下吧！

产品：开发评估这个动画需要2天的工作量，这个版本来不及，要不放到下个版本再优化吧！

设计：怎么又是这样，好(qu)吧(shi)!

然后下个版本就不了了之了……

总结以上场景，在动画的开发过程中无非就是两个问题：

1、动画的开发成本比较高，需要反复调试；

如果是处女座的设计师，还会坐在开发同学旁边“折磨”开发同学一起调细节。

2、版本迭代周期紧，动画一般会被简化或砍掉；

动画相对于基础功能，只是锦上添花的效果，优先级比较低。

作为一个互联网从业人员，不管是产品，设计，开发还是测试，都有一个总的产品业务目标。大家最终的目的就是把产品做好，然后发家致富。对于偏离总目标的需求或者设计，砍砍砍！

那么，站在产品的业务目标来看(例如：提升活跃，增加营收)，功能玩法的设计，上线后呈现出来的数据效果比较直观(例如：留存率新增36%)。而动画设计的验收，很难有一个量化的标准。因此，为了减少开发成本，对于一些非核心路径的动画，一般能免则免。

为什么动画的开发成本高，优先级低，还是有很多app愿意投入大把时间来做动画？

动画可以帮我们提升UX(用户体验)，使UI界面显得更加一致和真实，并给整个产品带来创新的感觉。

动画有三个重要特性：

1、功能性Functional；

• 优化用户对界面的感知，使其感到更轻快更全面。

• 引起用户的注意。

• 提供(用户操作后的)视觉(功能)反馈，并为下一步的跳转做准备。

2、物理性Material；

• 在一致的动画原则和物理的(符合物理定律的)UI模型基础上构建动画。

• 定义屏幕和UI元件之间的空间相对关系，他们的相对高度，权重以及速度。

3、趣味性Delightful

• 在上面两个部分都满足的情况下，加入一些有趣的动画。

• 使它感觉独特，能在诸多动画中能让人眼前一亮。

• 娱乐用户，并让他们一想到动画就能想到该产品或者反之。

这时候，如果有人再质疑为什么要做这个动画，你就根据自己所做的动画属性，把上面的答案甩到他脸上。

好了，言归正传。相信很多设计师都喜欢做天马星空的概念demo，可以无拘束的表达自己的想法，但一涉及到落地实现，各种问题就出来了。

接下来就带你来解决动画还原的问题，只需简单的2步，即可告别繁琐的动画标注和还原问题。

步骤一：

安装AE软件＋bodymovin插件

准备工具：

软件：Adobe After Effects(版本到CC 2014以上即可)

AE插件：Bodymovin(附件下载)

Mac用户：

1、打开安装器ZXP Installer，拖动bodymovin.zxp到安装器上；

2、安装过程中会先看到updating,耐心等待一分钟左右，看到The extension was successfully installed!则表示插件安装成功了。(如下图)

Windows用户：

1、把bodymovin.zxp的文件拷贝到ExManCmd_win的文件夹里；

2、在ExManCmd_win的文件夹里打开CMD(使用win+r组合键，弹出“运行”窗口，输入CMD，即可打开命令提示符)。然后在窗口输入ExManCmd.exe /install bodymovin.zxp 回车，耐心等待一分钟左右，即可(如下图)

步骤二：

如何导出json动画文件

1、安装成功后打开AE，设置在首选项 ->常规 ，将允许脚本写入文件和访问网络选项勾选上。否则后面导出时会报错。设置页面见下图：

2、状态栏上选择窗口 -> 扩展 -> Bodymovin，选择好合成和保存路径后，点击Render就能导出json了，再把json交给客户端工程师就能生成动画。

在导出json文件时，可以点击设置图标，选择其他几种不同的方案

1、为动画分解成多个文件

2、将字体转换成图形形状

3、隐藏，检查导出时需要隐藏的图层

4、向导，检查导出时需要导出的向导层

5、额外补间，检查表达式是否指向所有补间动画

6、原始名称，输出原始项目名称

7、将动画和播放器合并到一个单独文件

8、Demo 导出一个本地可以查看的html演示文件

一般默认会选择2，建议导出的时候同时选择8，这样导出的html可以在浏览器中查看动画效果(以防导出的文件动画缺失)

关于AE导出json动画的几个疑问：

1、json动画的优缺点有哪些？

优点：

1、开发成本低，动画的还原度高。设计师导出 json 文件后，扔给开发同学即可。原本要1天甚至更久的动画实现，现在只要不到一小时甚至更少时间了。

2、支持服务端 URL 方式创建。所以可以通过服务端配置 json 文件，随时替换客户端的动画，不用通过发版本就可以做到了。比如 app 启动动画可以根据活动需要进行变换了。

3、性能提高，可以替代原来需要使用帧图完成的动画。节省了客户端的空间和加载的内存。

4、跨平台，iOS、安卓平台可以使用一套文件。省时省力，动画一致。不用设计师跑去两边去跟着微调确认了。

5、支持转场动画。 PresentViewController／DismissViewController 时可以做转场效果。

不足：

1、对一些AE的属性支持不够完全(例如：表达式，中继器)

详情见官网：https://github.com/airbnb/lottie-ios。

2、对系统平台版本限制，如 iOS8 及以上，安卓 API14 及以上。

3、对可交互的动画暂时还不行，主要是以播放类型动画。

2、AE动画导出json文件时，需要注意些什么？

答：做动画时，图片和图层最好用英文命名，不然导出的json文件有些地方会乱码。

3、json动画的适用范围有哪些？

答：json适用于小范围的动画(如下图)，页面过渡跳转，弹窗动画建议参考facebook 官方开源动画 origami(支持导出代码，开发可以直接用)，网上有教程，感兴趣的同学可以自行学习。官网：http://origami.design/

4、Lottie是什么，开发不会用Lottie怎么办？

答：Lottie是一个可以解析使用【bodymovin】插件从  Adobe After Effects 中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native  中进行解析使用的开源库。这个库由 Airbnb 开发并在2017年2月份左右开源的。不会用还能怎们办，一个字：学！

以上是楼主结合项目总结的一些经验，各位小伙伴在使用过程中，如有疑问，欢迎留言评论～