3步实现AE项目高效转JSON：ae-to-json零基础上手指南

ae-to-json是一款专业的开源工具，能够将Adobe After Effects项目完整转换为标准JSON格式，打通设计与开发之间的数据流转。通过该工具，设计师制作的合成、图层、关键帧等动画数据可无缝导出为结构化JSON，为Web动画开发、数据可视化、移动应用和游戏开发提供标准化数据输入。无论是技术初学者还是专业开发团队，都能快速掌握这一工具实现AE项目的高效数字化转换。

核心功能解析

完整项目结构导出

该工具能够全面捕获After Effects项目的所有关键元素，包括项目元数据（版本信息、构建号）、合成设置（帧率、分辨率、时长）、图层属性（变换参数、效果设置）以及关键帧动画数据（时间点、数值变化、缓动曲线）。这种完整的数据导出确保了动画效果在不同平台间的一致性还原。

标准化JSON输出

工具采用统一的数据结构规范，将复杂的AE对象模型转换为层次清晰的JSON格式。输出数据包含明确的类型标识和关系结构，如合成类型（Composition）、素材类型（Footage）和文件夹结构（Folder），便于后续解析和处理。

多场景适配能力

支持多种使用场景需求，既可通过Node.js环境与after-effects模块配合使用，也可直接在AE脚本编辑器中运行，还能构建自定义JSX脚本以适应特殊工作流。这种灵活性使工具能够融入不同的开发流程。

快速上手流程

环境准备（5分钟）

确保系统已安装Node.js和npm包管理器。通过以下命令安装核心依赖：

npm install ae-to-json after-effects --save

[!NOTE] 推荐使用Node.js 14.x及以上版本以获得最佳兼容性。

基础使用方法（10分钟）

最简便的使用方式是通过Node.js调用after-effects模块执行转换：

const aeToJSON = require('ae-to-json/after-effects');
const ae = require('after-effects');

ae.execute(aeToJSON)
  .then(json => {
    // 处理导出的JSON数据
    console.log(json.project.items.length + '个项目项已导出');
  })
  .catch(e => console.error('转换失败:', e));

AE脚本编辑器使用（15分钟）

对于直接在AE中操作的场景：

1. 打开After Effects
2. 导航至 File → Scripts → Open Script Editor
3. 复制ae-to-json脚本内容
4. 执行脚本并获取JSON输出

// 在AE脚本编辑器中
JSON.stringify(aeToJSON(), null, '  ');

典型应用场景

Web动画开发

将AE中的复杂动画导出为JSON后，可在Three.js或GreenSock等Web动画库中重现。例如电商网站的产品展示动画，设计师在AE中制作完成后，通过ae-to-json导出关键帧数据，前端开发者直接使用这些数据驱动Web动画，实现设计与开发的无缝衔接。

数据可视化系统

利用AE强大的动画制作能力创建数据可视化模板，导出JSON数据后，可根据实时数据动态更新可视化效果。金融行业的K线图动画、物联网监控系统的实时数据展示都可采用这种方式实现。

移动应用动效

将AE制作的交互动效导出为JSON，通过自定义解析器在iOS或Android应用中实现原生动效。社交应用的转场动画、工具类应用的功能引导动效都能通过这种方式高效实现。

高级使用技巧

自定义数据过滤

通过修改导出逻辑，只保留项目中需要的特定数据。例如仅导出合成的基本信息和关键帧数据，忽略素材源文件信息，以减小JSON文件体积。

// 示例：过滤不需要的属性
const filteredJSON = aeToJSON().project.items.map(item => ({
  name: item.name,
  typeName: item.typeName,
  duration: item.duration
}));

批量处理工作流

结合Node.js文件系统模块，实现多个AE项目的批量转换：

const fs = require('fs');
const projects = ['project1.aep', 'project2.aep'];

projects.forEach(project => {
  // 批量处理逻辑
});

💡 性能优化技巧：对于大型AE项目，建议分模块导出，先导出合成结构，再按需导出具体图层数据，避免一次性处理过大的JSON对象。

数据结构解析

ae-to-json导出的JSON包含以下核心层级结构：

层级	主要属性	说明
项目元数据	version, buildNumber, ccUserName	AE项目的基本信息和版本标识
项目项集合	items数组, numItems	包含所有合成、素材和文件夹
合成对象	duration, frameRate, layers	合成的时间设置和包含图层
图层对象	name, type, properties	图层名称、类型和属性集合
关键帧数据	time, value, ease	动画关键帧的时间点、数值和缓动信息

[!NOTE] 示例项目的testOutput.json文件包含43325行数据，实际应用中建议根据需求进行数据筛选和压缩。

常见问题诊断

Q: 导出的JSON文件过大怎么办？
A: 可通过以下方法减小文件体积：1)过滤不需要的属性和图层；2)压缩关键帧数据，合并相似关键帧；3)使用JSON压缩工具如jsonminify进一步处理。

Q: 导出过程中提示脚本错误如何解决？
A: 首先检查AE版本兼容性（建议CS6及以上），其次确保安装了必要的依赖库（es5-shim和JSON2），最后检查AE项目是否包含损坏的素材或图层。

Q: 如何确保关键帧数据的精度？
A: 工具默认保留完整精度，如需调整可修改getKeyframesForProp.js中的精度处理逻辑，通过toFixed()方法控制小数位数。

测试与开发

项目提供完整的测试套件，位于test/目录下，包含图层测试(testLayers.js)、属性类型测试(testPropertyType.js)等多个专项测试。执行以下命令运行测试：

npm test

测试将生成testOutput.json文件，包含完整的导出数据，可用于验证转换结果。开发过程中可使用监控模式：

npm start

实时观察代码变更对转换结果的影响，提高开发效率。

项目资源

• 示例项目文件：test/ae/testProject.aepx
• 核心转换逻辑：src/index.js
• 工具函数集：src/util/
• 测试用例：test/目录下的各类测试脚本

通过合理利用这些资源，开发者可以快速掌握工具的工作原理并进行二次开发，定制符合特定需求的转换逻辑。

ae-to-json作为连接设计与开发的桥梁工具，不仅解决了AE项目数据的标准化导出问题，更为动画数据的跨平台应用提供了可能。无论是个人开发者还是企业团队，都能通过这款工具提升工作流效率，实现设计创意的高效数字化落地。