Bodymovin怎么导出JSON?AE动画转Lottie动图的完整指南
在当前的UI设计和前端开发领域,Lottie动画因其轻量、高保真和可交互性而备受青睐,而要将After Effects(AE)中的动画转换为Lottie格式,Bodymovin这个插件无疑是必备利器,它的核心功能就是将AE动画导出为JSON文件,这个JSON文件随后可以被Lottie库解析并流畅地运行在各种平台上,Bodymovin具体怎么导出JSON呢?本文将为你提供详细的步骤指南。
准备工作:安装Bodymovin插件
在开始导出之前,确保你已经安装了Bodymovin插件。
- 下载插件:访问Bodymovin的官方GitHub仓库(https://github.com/bodymovin/bodymovin)或AE插件资源网站,下载与你AE版本匹配的最新版Bodymovin插件,通常是一个.zip文件。
- 安装插件:
- Windows:将解压后的文件复制到AE的安装目录下的
Support Files\Plug-ins文件夹中。 - Mac:将解压后的文件复制到
应用程序/Adobe After Effects [版本号]/Plug-ins文件夹中。
- Windows:将解压后的文件复制到AE的安装目录下的
- 重启AE:安装完成后,完全关闭并重新打开After Effects Effects,Bodymovin插件才会被正确加载。
导出JSON的详细步骤
当你的AE动画制作完成,并准备好导出为Lottie格式(JSON)时,请按照以下步骤操作:
-
打开AE项目并准备动画:
- 打开你包含目标动画的AE项目。
- 确保动画的预览效果符合你的预期,检查图层、关键帧、表达式等是否都正确无误。
-
打开Bodymovin导出设置:
- 在AE顶部菜单栏中,点击
文件(File)>导出(Export)>使用Bodymovin导出到Lottie JSON (Export with Bodymovin to Lottie JSON)。 - 或者,你可以通过AE的
窗口(Window)>扩展(Extensions)>Bodymovin来打开Bodymovin面板,然后点击面板中的“导出(Export)”按钮。
- 在AE顶部菜单栏中,点击
-
配置导出参数: 打开导出设置窗口后,你会看到多个选项卡,需要进行一些关键配置:
-
基础设置 (Basic Settings):
- 导出路径 (Destination):点击“浏览(Browse)”选择JSON文件的保存位置和文件名。
- 名称 (Name):可以输入动画的名称,这通常会作为JSON文件中的一些标识信息。
- AE合成 (AE Comp):下拉菜单中选择你要导出的AE合成,如果你的项目中有多个合成,请确保选择的是正确的那个。
- 尺寸 (Dimensions):通常默认使用AE合成的尺寸,你也可以在这里自定义宽度和高度,但建议与AE合成设置保持一致,除非你有特殊需求。
- 帧率 (Frame Rate):默认使用AE合成的帧率,确保与目标平台要求的帧率一致,通常为30fps或60fps。
-
渲染设置 (Render Settings):
- 导出图像 (Export Images):通常建议勾选此项,尤其是在导出包含复杂矢量图形或需要精确还原的动画时,Bodymovin会导出每一帧的图像序列(PNG/JPG等),并将这些图像的路径或数据信息写入JSON,如果取消勾选,则仅导出矢量路径数据,对于某些复杂效果或位图动画可能会导出不完整。
- 图像序列格式 (Image Sequence Format):如果勾选了导出图像,可以选择图像的格式,如PNG(无损,推荐)、JPG等。
- 裁剪区域 (Crop Area):如果需要,可以设置裁剪区域,去除不必要的空白边缘。
- 忽略透明度 (Ignore Alpha):如果你的动画不需要透明背景,可以勾选此项以减小文件体积。
- 循环 (Loop):设置动画的循环次数,0表示无限循环。
- 版本 (Version):通常选择最新的Lottie规范版本。
-
高级设置 (Advanced Settings):
- 优化 (Optimize):勾选可以对JSON文件进行优化,减小文件体积。
- 字体 (Fonts):Bodymovin会尝试将AE中使用的字体嵌入到JSON中,或者使用系统默认字体替代,确保目标平台有相应字体,或提前告知开发者字体处理方式。
- 插件支持 (Plugins Support):如果你的AE动画使用了特定的插件效果(如某些第三方粒子效果),Bodymovin可能不完全支持,需要提前测试,勾选相关选项可能会尝试处理这些效果。
- 导出隐藏图层 (Export Hidden Layers):根据需要决定是否导出AE中被隐藏的图层。
-
-
开始导出:
- 完成所有必要的设置后,点击窗口右下角的“导出(Export)”按钮。
- Bodymovin开始处理AE动画,并在AE的渲染队列或进度窗口中显示导出进度,导出时间取决于动画的复杂程度、时长和电脑性能。
-
检查导出结果:
- 导出完成后,到你指定的路径下找到生成的JSON文件。
- 你可以使用Lottie官方提供的在线预览工具(如https://lottiefiles.com/preview)或其他Lottie播放器来验证JSON文件是否正确导出了你的动画效果。
常见问题与注意事项
- 导出失败或JSON不完整:
- 检查AE动画中是否有Bodymovin不支持的特性(如某些特定的效果、表达式或插件)。
- 确保所有图层和关键帧都正确无误,没有损坏。
- 尝试简化动画,看是否是复杂度导致的问题。
- 重新安装最新版的Bodymovin插件。
- JSON文件过大:
- 检查是否导出了不必要的图像序列或图层。
- 在“渲染设置”中尝试勾选“优化”选项。
- 减少动画的帧率或缩短动画时长(如果允许)。
- 简化矢量图形的复杂度。
- 动画在Lottie中显示异常:
- 检查“尺寸”和“帧率”设置是否与AE合成一致。
- 确认“循环”等参数设置是否正确。
- 使用Lottie预览工具对比,定位问题所在。
通过Bodymovin将AE动画导出为JSON文件是实现Lottie动画流程的关键一步,虽然插件界面选项较多,但只要了基础设置(如导出路径、AE合成选择、尺寸帧率)和核心选项(如图像序列导出),并注意一些常见问题的排查,就能顺利完成导出,导出的JSON文件随后可以交给开发人员,通过Lottie库轻松集成到各种APP、网页或小程序中,让你的AE动画在数字产品中“活”起来,希望本文的指南能帮助你顺利使用Bodymovin导出JSON!



还没有评论,来说两句吧...