AEUX：从设计到动画的智能转换技术实现

AEUX：从设计到动画的智能转换技术实现

【免费下载链接】AEUXEditable After Effects layers from Sketch artboards项目地址: https://gitcode.com/gh_mirrors/ae/AEUX

AEUX是一个开源工具，它解决了设计师在Sketch或Figma中创建UI设计后，需要手动重建图层才能导入After Effects进行动画制作的痛点。通过智能解析设计文件的层级结构和样式属性，AEUX实现了设计元素到可编辑After Effects图层的无缝转换，大幅提升了从静态设计到动态效果的转化效率。

设计到动画转换的技术挑战

现代设计工作流中，设计师通常使用Sketch或Figma创建静态界面设计，然后需要将这些设计转换为After Effects中的动画元素。传统的手动转换过程存在多个技术障碍：

数据格式的不兼容性：Sketch和Figma使用基于向量的设计数据结构，而After Effects采用基于时间轴的合成系统。两者在图层表示、属性定义和渲染机制上存在根本差异。

层级结构的复杂性：设计工具中的组件、符号和自动布局系统需要准确映射到After Effects的预合成和父子层级关系。特别是Figma的自动布局框架和Sketch的符号系统，需要特殊的处理逻辑。

样式属性的转换：设计工具中的填充、描边、阴影、模糊等视觉样式需要转换为After Effects对应的图层样式和效果。渐变填充、混合模式等高级属性需要精确的数学映射。

性能与保真度的平衡：在保持设计保真度的同时，需要优化转换后的After Effects项目性能，避免生成过于复杂的形状图层导致渲染缓慢。

模块化架构与核心转换引擎

AEUX采用模块化架构设计，将转换过程分解为三个主要阶段：设计数据解析、中间数据结构转换、After Effects图层生成。

设计数据解析层

位于Figma/AEUX/src/code.ts和Sketch对应模块中的解析器，通过设计工具的API获取完整的图层信息。关键解析逻辑包括：

// Figma数据解析示例 function nodeToObj(selection) { let shapeTree = []; let imageHashList = []; // 递归遍历图层树 selection.forEach(node => { if (node.type === 'FRAME' || node.type === 'GROUP') { processContainerNode(node, shapeTree); } else { processShapeNode(node, shapeTree); } }); return shapeTree; }

解析器需要处理多种图层类型：

• 矢量形状：路径数据、布尔运算、圆角半径
• 文本图层：字体属性、对齐方式、行高和字距
• 图像资源：位图引用、尺寸、压缩设置
• 组件实例：主组件引用、覆盖属性

中间数据结构标准化

解析后的设计数据被转换为统一的JSON格式，作为AEUX的内部交换格式。这个中间层包含：

{ "layerData": [{ "type": "Group", "name": "Button", "frame": {"x": 100, "y": 50, "width": 200, "height": 60}, "layers": [...], "opacity": 1.0, "blendMode": "NORMAL" }], "prefs": { "compScale": 3, "precompGroups": true, "parametrics": false } }

标准化过程确保来自不同设计工具的数据具有一致的表示形式，为后续的After Effects转换提供统一接口。

After Effects图层生成器

位于Ae/AEUX/src/host/AEFT/host.ts的宿主脚本是转换过程的核心。它接收标准化数据并创建对应的After Effects图层：

function buildLayers(compObj) { // 重置变量 importVersion = compObj.layerData[0].aeuxVersion; maskLayer = {}; // 应用用户首选项 if (compObj.prefs) { prefs = compObj.prefs; } // 创建临时合成 var tempComp = app.project.items.addComp('LOADING...', 500, 500, 1, 1, 1); tempComp.openInViewer(); // 按类型过滤并构建图层 filterTypes(compObj.layerData); // 清理临时资源 tempComp.remove(); return JSON.stringify({msg: returnMessage, layerCount}); }

图层生成器根据类型调用不同的创建函数：

• aeText()：处理文本图层，包括点文本和区域文本
• aeGroup()：处理组和组件，可选择创建预合成
• aeRect()/aeEllipse()/aeStar()：处理参数化形状
• aePath()：处理贝塞尔路径和自定义形状
• aeImage()：处理图像资源的导入和定位

上图展示了AEUX插件的核心配置界面，左侧为Figma中的操作面板，右侧为After Effects中的参数设置区域。这种双向界面设计允许设计师在设计工具中直接控制转换参数。

关键技术实现细节

参数化形状检测与转换

AEUX的Detect parametric shapes选项能够识别设计工具中的基本几何形状（矩形、椭圆、星形）并转换为After Effects中的参数化形状图层，而不是栅格化或转换为贝塞尔路径。这种转换保持了形状的可编辑性：

function aeRect(layer, opt_parent) { var r = initShapeLayer(layer, opt_parent); // 创建矢量组 r(2).addProperty('ADBE Vector Group'); r(2)(1).name = layer.name; // 创建矩形形状 r(2)(1)(2).addProperty('ADBE Vector Shape - Rect'); r(2)(1)(2)(1)('ADBE Vector Rect Size') .setValue([layer.frame.width, layer.frame.height]); // 处理圆角 if (layer.roundness) { r(2)(1)(2)(1)('ADBE Vector Rect Roundness') .setValue(layer.roundness); } // 应用样式属性 addStroke(r, layer); addFill(r, layer); addDropShadow(r, layer); return r; }

参数化转换的优势在于：

1. 保持可编辑性：转换后的形状可以在After Effects中继续调整圆角、尺寸等参数
2. 减少文件大小：参数化表示比贝塞尔路径数据更紧凑
3. 提高渲染性能：After Effects可以更高效地渲染参数化形状

预合成组与层级保持

当启用Precomp groups选项时，AEUX会将设计中的组转换为After Effects的预合成。这保持了设计的层级结构，便于后续的动画制作：

function aeGroup(layer, opt_parent) { if (prefs.precompGroups || layer.type == 'Component') { // 在AEUX文件夹中创建预合成 var aeuxFolder = createNamedFolder('AEUX'); var frameFolder = createNamedFolder(compName); frameFolder.parentFolder = aeuxFolder; var groupFolder = createNamedFolder('Precomps', frameFolder); // 创建新合成 var groupComp = app.project.items.addComp( nameInc(layer.name, app.project.items), Math.max(Math.round(layer.frame.width * compMult), 4), Math.max(Math.round(layer.frame.height * compMult), 4), 1, thisComp.duration, frameRate ); groupComp.parentFolder = groupFolder; var r = thisComp.layers.add(groupComp, thisComp.duration); // 临时切换到组预合成进行内部构建 var mainComp = thisComp; thisComp = groupComp; filterTypes(layer.layers, null); thisComp = mainComp; // 设置变换属性 r.collapseTransformation = true; r('ADBE Transform Group')('ADBE Position') .setValue([layer.frame.x * compMult, layer.frame.y * compMult]); return r; } }

预合成策略提供了以下优势：

• 隔离动画作用域：每个组成为独立的合成，便于单独制作动画
• 保持设计结构：嵌套关系被完整保留
• 提高组织性：复杂的UI组件可以独立管理和复用

文本属性的精确映射

文本转换是设计到动画转换中最复杂的部分之一。AEUX需要处理字体、大小、行高、字距、对齐方式等多种属性：

function aeText(layer, opt_parent) { // 创建点文本或区域文本 if (layer.kind == 'Point') { r = thisComp.layers.addText(''); } if (layer.kind == 'Figma') { r = thisComp.layers.addBoxText([layer.frame.width, layer.frame.height], ''); } // 设置文本属性 var textProp = r('ADBE Text Properties')('ADBE Text Document'); var textDoc = textProp.value; textDoc.resetCharStyle(); textDoc.resetParagraphStyle(); // 字体和大小 textDoc.font = layer.fontName; textDoc.fontSize = layer.fontSize; // 填充颜色 var fill = [layer.textColor[0], layer.textColor[1], layer.textColor[2]]; var opacity = layer.textColor[3]; textDoc.applyFill = true; textDoc.fillColor = fill; // 字距调整（需要文本动画器处理大数值） if (layer.trackingAdjusted >= 1000 || layer.trackingAdjusted <= -1000) { var textTracking = r('ADBE Text Properties')(4) .addProperty('ADBE Text Animator'); textTracking.name = 'Text tracking'; textTracking('ADBE Text Animator Properties') .addProperty('ADBE Text Tracking Amount') .setValue(layer.trackingAdjusted); } else { textDoc.tracking = Math.floor(layer.trackingAdjusted); } // 段落对齐 textDoc.justification = paragraphJustification(layer.justification); return r; }

文本转换的挑战包括：

• 字体兼容性：确保设计中的字体在After Effects中可用
• 文本布局差异：处理设计工具和After Effects在文本渲染上的细微差异
• 高级排版特性：支持字距、行高、基线偏移等高级排版属性

上图展示了AEUX的高级配置选项，包括合成尺寸乘数、帧率设置、参数化形状检测等关键参数。这些选项允许设计师根据项目需求微调转换过程。

实际应用场景与配置建议

Figma设计系统的迁移工作流

对于使用Figma的设计团队，AEUX提供了完整的设计系统迁移方案：

1. 组件识别与转换：AEUX能够识别Figma组件实例，并将其转换为After Effects中的预合成。这保持了设计系统的一致性，便于后续的动画制作。

2. 自动布局框架处理：Figma的自动布局功能生成的框架会被智能解析。AEUX会创建对应的组结构，并保持框架的背景和间距设置。

3. 设计令牌转换：颜色样式、文本样式和效果样式被转换为After Effects中的表达式或预设，便于全局更新。

配置建议：

• 对于复杂的设计系统，启用Precomp groups选项以保持组件结构
• 使用3x的Comp size multiplier确保在高分辨率设备上的清晰度
• 为动画项目设置合适的帧率（通常60fps用于UI动画）

Sketch符号系统的转换策略

Sketch的符号系统需要特殊的处理逻辑：

1. 符号实例识别：AEUX检测符号实例并引用主符号定义，避免重复创建相同内容。

2. 覆盖属性保持：符号实例中的覆盖文本、颜色等属性被正确应用到转换后的图层。

3. 嵌套符号支持：复杂的嵌套符号结构被转换为对应的预合成层级。

优化技巧：

• 在Sketch中合理使用符号可以提高转换后的组织性
• 对于需要频繁动画的元素，考虑将其创建为独立符号
• 使用一致的命名约定便于在After Effects中识别和管理

性能优化与故障排除

转换性能优化：

• 对于大型设计文件，分批转换不同画板
• 禁用不必要的图层效果以简化转换结果
• 使用参数化形状替代复杂路径减少计算量

常见问题解决：

• 字体缺失：确保After Effects中安装了设计中使用的字体
• 内存不足：关闭其他应用程序，增加After Effects内存分配
• 转换失败：检查设计文件完整性，确保所有资源可用

调试与日志： AEUX提供了详细的转换日志，位于After Effects的控制台输出中。这些日志对于诊断转换问题非常有价值：

AEUX: Building 45 layers. Thanks for your patience. Layer 'Button' converted successfully. Warning: Gradient fill on layer 'Background' converted to solid color.

扩展开发与定制化指南

自定义转换规则

AEUX的模块化架构允许开发者添加对新设计元素类型的支持。扩展点包括：

1. 新增图层类型处理器：在filterTypes函数中添加新的类型分支
2. 自定义属性映射：修改现有处理器中的属性转换逻辑
3. 添加新的样式效果：扩展addDropShadow、addBlur等样式函数

示例：添加对新设计工具的支持

function filterTypes(layerData, opt_parent) { for (var i = 0; i < layerData.length; i++) { // 现有的类型处理... // 添加对新类型的支持 if (layerData[i].type === 'CustomShape') { aeCustomShape(layerData[i], groupParent); pbar.value += progressInc; } } } function aeCustomShape(layer, opt_parent) { // 实现自定义形状的转换逻辑 var r = initShapeLayer(layer, opt_parent); // 自定义转换代码... }

集成到自动化工作流

AEUX支持命令行接口，可以集成到CI/CD流程中：

# 批量转换设计文件 aeux-convert --input designs.sketch --output ae-project.aep --scale 3x --fps 60 # 使用配置文件 aeux-convert --config conversion-config.json --input-dir ./designs --output-dir ./animations

自动化集成场景：

• 设计系统同步：当设计系统更新时自动生成对应的After Effects模板
• 批量资产处理：将多个设计文件转换为统一的动画项目结构
• 测试验证：在转换后自动运行质量检查脚本

与第三方工具的协同

AEUX可以与其他设计动画工具集成：

1. Lottie导出：将转换后的After Effects动画导出为Lottie JSON格式
2. 设计版本控制：与Git等版本控制系统集成，跟踪设计变更
3. 设计评审平台：自动生成动画原型供团队评审

未来发展方向

AEUX项目持续演进，未来的技术方向包括：

AI驱动的智能转换：利用机器学习算法优化图层识别和属性映射，提高转换准确性和效率。

实时协同编辑：实现设计工具与After Effects之间的双向同步，支持实时预览和编辑。

云渲染集成：将复杂的转换过程迁移到云端，减少本地计算负担，支持更大规模的设计文件。

更多设计工具支持：扩展对Adobe XD、Photoshop等工具的支持，形成更完整的设计到动画生态系统。

性能优化：通过增量更新和智能缓存机制，减少重复转换的计算开销。

通过持续的技术创新和社区贡献，AEUX正在重新定义设计到动画的工作流程，为数字创意行业带来革命性的效率提升。其开源特性确保了技术的透明性和可扩展性，使更多设计师和开发者能够参与到这一生态系统的建设中。

上图展示了在Figma中安装AEUX插件的标准流程。通过"Plugins > Development > Import plugin from manifest..."选项，用户可以手动导入插件清单文件，开始使用AEUX的设计到动画转换功能。

【免费下载链接】AEUXEditable After Effects layers from Sketch artboards项目地址: https://gitcode.com/gh_mirrors/ae/AEUX