动画还原100%-AE一键导出

原创文章 分类: 教程 版权:
18029 495 212 45
2017-08-03
153.7
首页推荐

AE一键导出动画文件,100%还原动画效果。设计无需手动标注参数,开发无需反复调试细节。本文偏教程类,上手简单,一劳永逸(插件见附件)。

Image title

工作中,你可能经常会遇到以下场景:
场景一:
设计:这是动画的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!则表示插件安装成功了。(如下图)

Image title

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

Image title


步骤二:
如何导出json动画文件


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

Image title

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

Image title

在导出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、对可交互的动画暂时还不行,主要是以播放类型动画。

Image title

2、AE动画导出json文件时,需要注意些什么?
答:做动画时,图片和图层最好用英文命名,不然导出的json文件有些地方会乱码。

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

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

Image title

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


5、导出的面板看不到合成项目?

答:动画文件需要合并成一个预合成才会出现在面板里。



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








哈尔哥

还没二够,不想奔三!

1736粉丝/26关注

原创小生
系统性设计思维养成告别切图标注-Sketch/PS+Zeplin

哈尔哥

哈尔哥

还没二够,不想奔三!

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN