2、PNG序列
PNG序列帧是把动画效果用一帧一帧的图像文件来表示,需要AE导出PNG序列帧图层,质量会比Gif好,因为是位图所以也能显示多种动画特效;以单帧图像呈现,输出后会生成一个PNG序列组的文件夹;
导出方式:AE菜单栏文件 — 导出 — 添加到渲染队列 — 导出PNG序列
3、Lottie( json)
Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。
QQ最新的Q弹超清表情,就是用Lottie实现的。
官方地址:https://airbnb.design/lottie/
官方文档:http://airbnb.io/lottie/#/
中文文档(@习常):https://www.yuque.com/lottie/document
Lottie导出插件:Bodymovin
Bodymovin是After Effects的插件,使用Lottie首先要在AE中安装Bodymovin插件,才可以导出json数据格式的动画供Lottie使用。
Bodymovin能够将AE中矢量图形做成的动效导成json文件,变成一串纯粹的代码,再被Lottie渲染还原出来。这就让“尺寸”和“帧率”摆脱了以往体积的束缚,导出的即使是又高清又流畅的大图,也可以保持很小的体积。
官网链接:https://aescripts.com/bodymovin/
官方文档:http://airbnb.io/lottie/#/
中文文档(@习常):https://www.yuque.com/lottie/document
Lottie社区:https://lottiefiles.com/
JSON文件预览:https://lottiefiles.com/preview (这个网址请收藏)
注意事项:
① 如何只导出一个json文件(json包含图片资源)
只需在合成设置中,勾选将图片转成base64,将图片资源转换为base64代码并一起保存到JSON文件中即可
② img文件夹里图片资源命名问题
如果有需要用到img文件夹的情况时,外链img文件夹里的图片资源必须跟json文件里的文件名一致,在跟开发更换资源的时候经常会混乱,会忘记更换图片,导致无法正常显示。
4、SVGA
SVGA 是由YY团队开发出来的一种跨平台的开源动画格式,同时兼容 iOS / Android / Web。SVGA 除了使用简单,性能卓越,由于动画文件体积更小,播放资源占用更优,动画还原效果更好;同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率,动画设计师专注动画设计,通过工具输出svga动画文件,提供给开发工程师在集成 svga player 之后直接使用。
SVGA 不同于 Lottie,Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现,而 SVGA 则将这些逻辑免去。也因此,SVGA 可以同时支持 Flash。SVGA 做的事情,实际上,非常简单,Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素(位图、矢量),并将其在时间轴中的每帧表现(位移、缩放、旋转、透明度)导出。Player 会负责将这些信息还原至画布上。
SVGA官网:http://svga.io/designer.html
AE 或 Animate 中导出 SVGA 文件插件:SVGAConverter_AE
① 下载安装包:Converter for Animate | Converter for After Effects
② 下载、安装并运行 Adobe 的插件安装程序 ZXP Installer
③ 选择 菜单 > 文件 > 打开,选中下载好的安装包,根据引导完成安装
④ 打开 Animate CC 或 After Effects 将被转换文件保存
⑤ 菜单栏选择 > 窗口 > 扩展 > SVGAConverter
⑥ 选择 输出路径 > 开始转换,稍等片刻后,svga 文件就会生成在您所输出的目录并开始播放