bodymovin怎么导出json

Bodymovin怎么导出JSON？AE动画转Lottie动图的完整指南

在当前的UI设计和前端开发领域，Lottie动画因其轻量、高保真和可交互性而备受青睐，而要将After Effects（AE）中的动画转换为Lottie格式，Bodymovin这个插件无疑是必备利器，它的核心功能就是将AE动画导出为JSON文件，这个JSON文件随后可以被Lottie库解析并流畅地运行在各种平台上，Bodymovin具体怎么导出JSON呢？本文将为你提供详细的步骤指南。

准备工作：安装Bodymovin插件

在开始导出之前,确保你已经安装了Bodymovin插件。

1. 下载插件：访问Bodymovin的官方GitHub仓库（https://github.com/bodymovin/bodymovin）或AE插件资源网站，下载与你AE版本匹配的最新版Bodymovin插件，通常是一个.zip文件。
2. 安装插件：
   • Windows：将解压后的文件复制到AE的安装目录下的Support Files\Plug-ins文件夹中。
   • Mac：将解压后的文件复制到应用程序/Adobe After Effects [版本号]/Plug-ins文件夹中。
3. 重启AE：安装完成后，完全关闭并重新打开After Effects Effects,Bodymovin插件才会被正确加载。

导出JSON的详细步骤

当你的AE动画制作完成，并准备好导出为Lottie格式（JSON）时,请按照以下步骤操作：

1. 打开AE项目并准备动画：

   • 打开你包含目标动画的AE项目。
   • 确保动画的预览效果符合你的预期，检查图层、关键帧、表达式等是否都正确无误。

2. 打开Bodymovin导出设置：

   • 在AE顶部菜单栏中，点击文件(File) > 导出(Export) > 使用Bodymovin导出到Lottie JSON (Export with Bodymovin to Lottie JSON)。
   • 或者，你可以通过AE的窗口(Window) > 扩展(Extensions) > Bodymovin来打开Bodymovin面板，然后点击面板中的“导出(Export)”按钮。

3. 配置导出参数： 打开导出设置窗口后，你会看到多个选项卡,需要进行一些关键配置：

   • 基础设置 (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中被隐藏的图层。

4. 开始导出：

   • 完成所有必要的设置后，点击窗口右下角的“导出(Export)”按钮。
   • Bodymovin开始处理AE动画，并在AE的渲染队列或进度窗口中显示导出进度，导出时间取决于动画的复杂程度、时长和电脑性能。

5. 检查导出结果：

   • 导出完成后,到你指定的路径下找到生成的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！