技术实践
淘天以AE插件串联AI动画生产与业务开发
概述
淘天团队把传统「AE → Lottie/视频 → 前端手写代码」的交付流程改造为「AE 插件直出代码」。设计师侧在 After Effects 中按两条规范制作(遮罩图层与被遮罩父元素保持一致、用插件实时预览检查图层遮挡),点击插件「动画转码」后自动完成「AE 工程文件 → 代码生成 → byte 预览 → 动画代码链接」,确认效果与设计稿一致后只交付一个动画代码链接。 开发侧首次在 Cursor 中安装 Animation Integration Skill。若设计师给的是示意性动效稿,先用 D2C 搭好业务 UI 再叠加动效。随后打开动画链接做多段动画拆分、剔除背景与脚手架等干扰元素。平台按图层处理结果输出 CSS / Anime.js 两种开箱即用格式,动画逻辑与业务逻辑分离。 最后在编辑器中唤起会话、提供需要集成动画的 div 上下文,由模型完成集成。Ae 插件已支持形状图层(SVG)、遮罩动画、矢量动画、帧动画等主流动画类型。效果验证覆盖带复杂粒子动画、带可替换数字金额的普通动画,以及已有组件新增动画、大量新增动画元素两类集成场景。