AE怎么导出.json文件?详细步骤与实用技巧全解析
在After Effects(AE)中,.json文件通常用于数据交互、表达式驱动或与其他程序(如网页、Unity、Cocos等)联动,虽然AE原生不直接支持“一键导出.json”,但通过表达式、脚本或第三方工具,可以轻松实现数据或动画参数的.json格式导出,本文将详细介绍3种主流方法,从基础到进阶,帮你搞定AE中.json文件的导出。
通过表达式提取数据,手动转换为.json(适合简单参数)
如果只需要导出单个图层或属性的简单数据(如位置、旋转、缩放等),可以通过表达式读取参数值,再手动整理为.json格式。
操作步骤:
- 选中目标属性:在AE时间线面板中,点击需要导出的图层属性(如“位置”属性)。
- 添加表达式:按
Alt + 点击属性前的秒表图标,打开表达式输入框,输入以下代码(以“位置”属性为例):thisComp.layer("目标图层名称").transform.position;如果是当前图层,可直接用
transform.position。 - 查看表达式值:按
Enter确认表达式后,AE会实时显示参数值(如[x, y]数组),在表达式输入框右侧点击“图表编辑器”图标,可查看数值随时间变化的曲线。 - 复制数据并整理:在图表编辑器中,右键点击曲线选择“复制”→“复制表达式值”,将数值粘贴到文本编辑器(如VS Code、记事本)中,手动整理为.json格式。
- 示例:位置数据
[100, 200]可整理为{"position": [100, 200]};多个关键帧数据可按时间顺序整理为数组:[ {"time": 0, "value": [100, 200]}, {"time": 1, "value": [150, 250]} ]
- 示例:位置数据
优点:无需额外工具,适合少量数据快速导出。
缺点:手动整理效率低,不适合复杂或大量数据。
使用ExtendScript脚本批量导出.json(适合专业用户)
ExtendScript是AE内置的脚本语言,通过编写或调用现成脚本,可批量导出图层属性、关键帧数据等为.json文件,效率远高于手动操作。
方法1:使用官方“Keyframe Data”脚本(AE自带)
AE自带“Keyframe Data”脚本可导出关键帧数据,但默认格式为文本,需稍作修改为.json。
- 打开脚本:在AE中,菜单栏选择“窗口”→“脚本”→“运行脚本”,找到“Keyframe Data.jsx”(通常位于AE安装目录下的
Support Files/Scripts/ScriptUI Panels文件夹)。 - 选择参数:在弹出的窗口中,勾选需要导出的属性(如位置、旋转、缩放等),点击“导出”。
- 修改为.json格式:导出的文本文件包含关键帧时间(
time)和数值(`value``),用文本编辑器打开,将格式调整为.json。{ "position": [ {"time": 0, "value": [100, 200]}, {"time": 1, "value": [150, 250]} ], "rotation": [ {"time": 0, "value": 0}, {"time": 1, "value": 90} ] }
方法2:编写自定义ExtendScript脚本(推荐)
如果需要更灵活的.json导出(如自定义字段、排除特定属性),可编写自定义脚本,以下是一个简单示例,导出选中图层的“位置”和“旋转”数据为.json:
// 导出选中图层属性为.json
function exportLayerPropsToJSON() {
var selectedLayers = app.project.activeItem.selectedLayers;
if (selectedLayers.length === 0) {
alert("请先选择一个图层!");
return;
}
var layer = selectedLayers[0];
var propsData = {
"layerName": layer.name,
"properties": {}
};
// 导出位置和旋转属性
var propsToExport = ["position", "rotation"];
for (var i = 0; i < propsToExport.length; i++) {
var prop = layer.property(propsToExport[i]);
if (prop && prop.numKeys > 0) {
var keyframes = [];
for (var j = 1; j <= prop.numKeys; j++) {
keyframes.push({
"time": prop.keyTime(j),
"value": prop.keyValue(j)
});
}
propsData.properties[propsToExport[i]] = keyframes;
}
}
// 保存为.json文件
var outputFile = File.saveDialog("导出为.json", "JSON文件:*.json");
if (outputFile) {
outputFile.open("w");
outputFile.write(JSON.stringify(propsData, null, 2)); // null,2为格式化参数
outputFile.close();
alert("导出成功:" + outputFile.fsName);
}
}
// 执行函数
exportLayerPropsToJSON();
使用方法:
- 将上述代码保存为
.jsx文件(如exportProps.jsx)。 - 在AE中,菜单栏选择“文件”→“脚本”→“运行脚本文件”,选择该脚本,即可导出选中图层的.json数据。
优点:批量处理,可自定义格式,适合专业用户和复杂项目。
缺点:需要一定脚本基础,或寻找现成脚本。
借助第三方插件/工具快速导出.json(适合高效协作)
如果不想写脚本,可以使用第三方插件或工具,通过可视化界面快速导出.json。
推荐工具:Bodymovin(Lottie)导出(适合动画交互)
Bodymovin是AE的知名插件,可将动画导出为.json格式,主要用于网页、App等平台的矢量动画播放(Lottie格式),虽然主要用途是动画导出,但其.json文件包含完整的动画参数(位置、旋转、缩放、遮罩、蒙版等),可直接用于数据交互。
操作步骤:
- 安装Bodymovin:下载最新版Bodymovin(https://github.com/airbnb/lottie-web/tree/master/after-effects),解压后将“ScriptUI Panels”文件夹中的“Bodymovin”文件夹复制到AE的
Support Files/Scripts/ScriptUI Panels目录下。 - 打开Bodymovin面板:重启AE,菜单栏选择“窗口”→“扩展”→“Bodymovin”,打开插件面板。
- 导出设置:
- 点击“Render”按钮,选择导出格式为“JSON”。
- 设置导出名称、保存路径,勾选需要导出的属性(默认包含所有动画属性)。
- 点击“Render”,即可生成包含完整动画数据的.json文件。
生成的.json示例(Lottie格式):
{
"v": "5.7.4", // Lottie版本
"fr": 30, // 帧率
"ip": 0, // 起始帧
"op": 60, // 结束帧
"w": 1920, // 画布宽度
"h": 1080, // 画布高度
"layers": [ // 图层数据
{
"ty": "shape", // 图层类型(形状)
"ks": { // 动画属性
"p": { // 位置
"k": [
{"t": 0, "s": [100, 200]},
{"t": 30, "s": [200, 300]}
]
}
}
}
]
}
优点:可视化操作,导出数据完整,适合动画和交互项目。
缺点:主要面向Lottie动画,若仅需部分数据可能需额外处理。
常见问题与注意事项
- AE版本兼容性:ExtendScript脚本需与AE版本匹配(如CS6、CC 2018、2023等),旧脚本在新版AE中可能需修改。
- 数据格式规范:导出.json前明确目标程序的数据结构(如网页需要
{x: number, y: number},而非[x, y]数组),避免格式不兼容。 - 性能优化:导出大量数据(如复杂合成)时,建议关闭AE的“自动保存”,避免卡顿。
AE中导出.json文件的方法可根据需求选择:
- 简单参数:用表达式提取+手动整理;
- 批量/自定义数据:编写或使用ExtendScript脚本;
- 动画交互:Bodymovin插件



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