AE动效落地必看教程(2)

来源:网络   作者:热心网友   发布时间:2022-04-12    浏览次数:1282

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渲染还原出来。这就让“尺寸”和“帧率”摆脱了以往体积的束缚,导出的即使是又高清又流畅的大图,也可以保持很小的体积。



Lottie/Bodymoving 支持的AE属性

官网链接: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 文件就会生成在您所输出的目录并开始播放



123共3页

资源不存在?点我报错

文件格式:其他 大小:未知 所需学币:0学币(VIP免学币)

素材介绍:AE动效,AE 动效插件,gifgun插件下载,lottie,figma导入AE

下载地址:百度网盘下载  

联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/aejiaocheng/9349.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通