哈尔哥
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
AE一键导出动画文件，100%还原动画效果。设计无需手动标注参数，开发无需反复调试细节。本文偏教程类，上手简单，一劳永逸（插件见附件）。
工作中，你可能经常会遇到以下场景：
场景一：
设计：这是动画的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月份左右开源的。不会用还能怎们办，一个字：学！
5、导出的面板看不到合成项目？
答：动画文件需要合并成一个预合成才会出现在面板里。
以上是楼主结合项目总结的一些经验，各位小伙伴在使用过程中，如有疑问，欢迎留言评论～
全部评论：53条
更多作品
发表评论