AE怎么导出JSON:从动画数据到交互应用的桥梁
在After Effects(AE)中制作完动画后,有时我们需要将动画数据导出为JSON格式,以便在网页、移动应用或其他交互平台中重新使用或进一步处理,JSON(JavaScript Object Notation)以其轻量级、易读和易解析的特性,成为跨平台数据交换的理想格式,本文将详细介绍AE中导出JSON的几种常用方法,帮助你实现动画数据的迁移与复用。
AE原生功能:通过“表达式引用”导出关键帧数据
AE本身没有直接“导出JSON”的菜单选项,但可以通过表达式和脚本功能提取动画数据,并手动或半自动转换为JSON格式,以下是具体步骤:
选中需要导出的属性
在AE中打开你的项目,选中包含动画的图层(如位置、缩放、旋转等属性),我们想导出一个“位置”属性的关键帧数据。
使用“wiggle表达式”临时提取数据
在属性名称左侧点击“停止表情”图标旁边的“添加表达式”按钮(或按Alt+Shift+点击属性名称),输入以下表达式:
var keys = thisProperty.numKeys;
var data = [];
for (var i = 1; i <= keys; i++) {
var time = key(thisProperty, i).time;
var value = thisProperty.valueAtTime(time);
data.push({time: time, value: value});
}
data;
这段表达式会遍历属性的所有关键帧,提取关键帧的时间和对应值,并以数组形式返回。
复制表达式结果到文本编辑器
在表达式中,你会看到类似[{time:0, value:[0,0]}, {time:1, value:[100,50]}, ...]的数据结构,全选表达式结果(点击表达式框右侧的下拉菜单,选择“编辑表达式全选”),然后复制(Ctrl+C/Cmd+C)。
转换为JSON格式
将复制的文本粘贴到文本编辑器(如VS Code、Sublime Text或记事本)中,稍作调整即可得到标准JSON。
[
{"time": 0, "value": [0, 0]},
{"time": 1, "value": [100, 50]},
{"time": 2, "value": [200, 100]}
]
注意:AE表达式中返回的是JavaScript对象,需确保数组格式和键名符合JSON规范(如双引号、无注释等)。
局限性
此方法需要手动操作,仅适用于少量属性;若需导出多个图层或复杂动画,效率较低。
使用第三方脚本:自动化导出JSON的利器
为了更高效地导出JSON,开发者社区提供了许多AE脚本,其中最常用的是Bodymovin(用于导出Lottie动画)和After Effects to JSON脚本,下面以Bodymovin为例,介绍完整流程:
安装Bodymovin脚本
Bodymovin是AE的免费开源插件,可将动画导出为JSON格式,供Lottie库(用于网页和移动端)解析。
- 访问[Bodymovin GitHub页面](https://github.com/airbnb/lottie-web/tree/master After Effects)下载最新版本。
- 解压文件,将
bodymovin文件夹复制到AE的脚本目录(Windows:C:\Program Files\Adobe\Adobe After Effects [版本]\Support Files\Scripts;Mac:/Applications/Adobe After Effects [版本]/Scripts/)。 - 重启AE,在菜单栏选择“窗口 > 扩展 > Bodymovin”即可打开面板。
配置Bodymovin导出设置
- 打开Bodymovin面板后,点击“Render”按钮。
- 在“Render Settings”中设置导出参数:
- File Name:保存JSON文件的名称和路径。
- File Type:选择“JSON”。
- Version:选择Lottie支持的版本(建议使用最新版)。
- Scale:设置导出分辨率(默认100%)。
- 其他选项(如是否导出隐藏图层、简化路径等)可根据需求调整。
导出JSON文件
- 点击“Render”按钮,AE会自动解析当前合成中的动画,并生成JSON文件。
- 导出的JSON包含完整的动画数据,包括图层属性、关键帧、缓动曲线、蒙版等,可直接用于Lottie播放。
Bodymovin的优势
- 自动化:一键导出,无需手动提取关键帧。
- 完整数据:支持导出复杂动画(如形状图层、文本动画、3D变换等)。
- 跨平台兼容:生成的JSON可直接在网页(Lottie Web)、iOS(Lottie iOS)、Android(Lottie Android)中使用。
其他推荐脚本
- After Effects to JSON(独立脚本):专注于导出属性关键帧,格式灵活,适合非Lottie场景。
- JSON Exporter(付费脚本):提供更精细的导出选项,如自定义JSON结构、过滤特定属性等。
进阶技巧:自定义JSON结构与数据过滤
如果Bodymovin的默认格式不符合需求,可以通过以下方式调整JSON结构:
修改脚本源码(Bodymovin)
Bodymovin的导出逻辑基于JavaScript,可编辑其源码(位于bodymovin/src/目录):
- 修改
properties.js中的getProp函数,调整属性提取逻辑。 - 在
assets.js中增删图层类型(如忽略预合成图层)。 - 修改
json.js中的JSONStringify函数,自定义输出格式(如添加时间单位转换、坐标归一化等)。
使用中间工具处理JSON
导出JSON后,可通过编程语言(如Python、JavaScript)进一步处理:
import json
# 读取AE导出的JSON
with open('animation.json', 'r') as f:
data = json.load(f)
# 过滤不需要的属性(如仅保留位置)
filtered_data = []
for layer in data['layers']:
if layer['ty'] == 1: # 假设ty=1表示形状图层
filtered_data.append({
'name': layer['nm'],
'position': layer['ks']['p']['k']
})
# 保存处理后的JSON
with open('filtered_animation.json', 'w') as f:
json.dump(filtered_data, f, indent=2)
常见问题与解决方案
导出的JSON无法在目标平台播放
- 检查版本兼容性:确保Lottie版本与目标平台支持的范围一致(如AE 2023导出的JSON需Lottie 5.0+)。
- 验证属性类型:某些AE属性(如3D旋转、蒙版羽化)可能需要特殊处理,参考Lottie官方文档支持列表。
关键帧数据丢失或不准确
- 确认表达式启用:导出前确保动画属性未禁用表达式(否则仅导出静态值)。
- 检查帧速率匹配:AE的帧速率与目标平台的帧速率不一致时,需在Bodymovin中设置正确的“帧速率”(与AE合成帧速率一致)。
大型动画导出卡顿
- 简化图层:隐藏或合并不必要的图层,减少计算量。
- 分段导出:将复杂动画拆分为多个小合成,分别导出后合并JSON。
AE中导出JSON的核心思路是“提取动画数据并结构化输出”,对于简单需求,可通过表达式手动提取;对于复杂动画或批量处理,Bodymovin等脚本是更高效的选择,通过合理选择工具和自定义处理,你可以轻松将AE动画迁移到网页、APP等交互平台,实现“一次制作,多端复用”的工作流。
无论是设计师还是开发者,AE到JSON的导出技巧,都能为跨平台动画协作打开新的大门,希望本文能为你提供实用的指导,让动画数据在AE与交互应用之间无缝流转!



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