AE怎么导出JSON代码:从动画数据到结构化文件的完整指南
在After Effects(AE)中,动画数据通常以关键帧、表达式等形式存在于项目文件中,但若需将动画逻辑、图层属性或时间线信息传递给其他平台(如Web开发、游戏引擎、数据可视化工具等),导出为JSON代码是最常见的解决方案,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,具有良好的可读性和跨平台兼容性,能高效存储AE中的结构化动画数据,本文将详细介绍AE导出JSON代码的多种方法,从内置功能到脚本工具,助你轻松实现动画数据的迁移与复用。
理解AE与JSON的关联:为什么要导出JSON?
在开始操作前,需明确AE中哪些数据适合导出为JSON,常见的可导出内容包括:
- 图层属性关键帧(如位置、缩放、旋转、透明度等);
- 表达式代码及计算结果;
- 时间线信息(如帧率、持续时间、标记点等);
- 合成设置(尺寸、像素比、背景色等);
- 自定义数据(如通过脚本添加的图层注释、标签等)。
导出JSON后,这些数据可被JavaScript、Unity、Unreal等工具直接调用,实现“AE设计+开发实现”的无缝协作,将按钮弹跳动画的关键帧数据导出为JSON,Web开发者可直接通过代码还原动画效果,无需手动编写CSS动画。
方法一:使用AE内置功能“导出”>“动画数据”(有限支持)
AE本身并未提供直接导出JSON的菜单选项,但通过“导出”功能可导出部分动画数据,再通过工具转换为JSON,具体步骤如下:
导出动画数据(XAML或XML格式)
AE支持将关键帧数据导出为XAML(用于WPF/Silverlight)或XML格式,这两种格式均为结构化数据,可转换为JSON。
-
操作步骤:
- 选中合成或图层,点击顶部菜单“文件”>“导出”>“动画数据”;
- 在弹出的对话框中选择“XAML”或“XML”格式(推荐XML,更通用);
- 设置保存路径,点击“保存”。
-
示例XML内容(导出图层位置关键帧):
<MotionData xmlns="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TransformGroup> <TranslateTransform X="100" Y="200"> <TranslateTransform.Animations> <DoubleAnimation From="100" To="300" Duration="0:0:1" RepeatBehavior="1x" /> </TranslateTransform.Animations> </TranslateTransform> </TransformGroup> </MotionData>
将XML转换为JSON
XML与JSON均为结构化数据,可通过在线工具或编程语言转换,例如使用Python的xmltodict库:
import xmltodict
import json
# 读取XML文件
with open("animation_data.xml", "r", encoding="utf-8") as f:
xml_data = f.read()
# 转换为字典
dict_data = xmltodict.parse(xml_data)
# 转换为JSON并保存
json_data = json.dumps(dict_data, indent=4, ensure_ascii=False)
with open("animation_data.json", "w", encoding="utf-8") as f:
f.write(json_data)
转换后的JSON示例:
{
"MotionData": {
"@xmlns": "http://schemas.microsoft.com/expression/blend/2008",
"@xmlns:x": "http://schemas.microsoft.com/winfx/2006/xaml",
"TransformGroup": {
"TranslateTransform": {
"@X": "100",
"@Y": "200",
"Animations": {
"DoubleAnimation": {
"@From": "100",
"@To": "300",
"@Duration": "0:0:1",
"@RepeatBehavior": "1x"
}
}
}
}
}
}
局限性:AE内置导出功能仅支持部分属性(如变换、不透明度),无法导出表达式、蒙版、效果等复杂数据,且转换过程需额外工具,适合简单动画场景。
方法二:使用ExtendScript脚本(自定义导出,灵活高效)
对于复杂导出需求(如导出表达式、自定义数据),最推荐的方式是编写ExtendScript脚本(AE支持的JavaScript方言),ExtendScript可直接访问AE的对象模型(如Project、Comp、Layer、Property),提取任意数据并导出为JSON。
准备ExtendScript开发环境
- 使用AE内置的“脚本编辑器”(顶部菜单“窗口”>“脚本”>“脚本编辑器”);
- 脚本文件需保存为
.jsx格式(如exportToJson.jsx)。
示例脚本:导出图层关键帧与表达式
以下脚本可导出选中图层的所有可动画属性(含关键帧时间、数值及表达式),生成结构化JSON:
// exportToJson.jsx
(function() {
// 检查是否有选中图层
var selectedLayers = app.project.activeItem.selectedLayers;
if (!selectedLayers || selectedLayers.length === 0) {
alert("请先选择一个或多个图层!");
return;
}
var exportData = {
project: app.project.name,
comp: app.project.activeItem.name,
frameRate: app.project.activeItem.frameRate,
layers: []
};
// 遍历选中图层
for (var i = 0; i < selectedLayers.length; i++) {
var layer = selectedLayers[i];
var layerData = {
name: layer.name,
index: layer.index,
enabled: layer.enabled,
properties: []
};
// 遍历图层属性(位置、缩放、旋转等)
var props = layer.property("ADBE Transform Group") || layer.property("Transform");
if (props) {
for (var j = 0; j < props.numProperties; j++) {
var prop = props.property(j);
if (!prop || !prop.canVaryOverTime) continue;
var propData = {
name: prop.name,
isExpression: prop.expressionEnabled,
expression: prop.expression || "",
keyframes: []
};
// 提取关键帧数据
if (prop.numKeys > 0) {
for (var k = 0; k < prop.numKeys; k++) {
var keyTime = prop.keyTime(k);
var keyValue = prop.keyValue(k);
var keyEase = prop.keyTemporalEase(k);
propData.keyframes.push({
time: keyTime,
value: keyValue,
easeIn: keyEase[0].speed,
easeOut: keyEase[0].speed
});
}
}
layerData.properties.push(propData);
}
}
// 添加自定义属性(如“图层注释”)
if (layer.comment) {
layerData.comment = layer.comment;
}
exportData.layers.push(layerData);
}
// 生成JSON字符串并保存
var jsonStr = JSON.stringify(exportData, null, 4);
var outputPath = File.saveDialog("保存JSON文件", "JSON文件:*.json");
if (outputPath) {
var file = new File(outputPath);
file.open("w");
file.write(jsonStr);
file.close();
alert("JSON导出成功:" + outputPath.fsName);
}
})();
脚本使用步骤
- 将上述代码复制到AE脚本编辑器中,保存为
exportToJson.jsx; - 在AE中打开目标合成,选择需要导出的图层;
- 执行脚本(顶部菜单“文件”>“脚本”>“运行脚本文件”,或直接拖拽脚本到AE界面);
- 选择保存路径,生成JSON文件。
导出JSON示例
{
"project": "动画项目.aep",
"comp": "主合成",
"frameRate": 30,
"layers": [
{
"name": "图层 1",
"index": 1,
"enabled": true,
"properties": [
{
"name": "位置",
"isExpression": false,
"expression": "",
"keyframes": [
{
"time": 0,
"value": [960, 540],
"easeIn": 0,
"easeOut": 0
},
{
"time": 1,
"value": [1200, 540],
"easeIn": 0,
"easeOut": -0.5
}
]
},
{
"name": "缩放",
"isExpression": true,
"


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