AI 动画辅助实现实践篇：从 AE 到可运行代码的全链路方案

▐  当前缺口：多模块串联动画

Skill 处理的是单个动画的集成，但真实业务中存在一类场景：同一页面的多个独立模块之间需要按顺序协同播放动画，且推进依赖业务事件。

典型例子：

红包飞入 → 自动触发 → 红包抖动 → 等待用户点击 → 砍价动画 → 接口返回 → 价格变化动画   ↑                     ↑              ↑                              ↑ 自动播放            动画结束触发      业务事件触发                 接口数据驱动

这类场景的问题不在于单个动画的还原，而在于动画之间的编排关系：

• 工具只产出单个动画实现，不产出动画之间的串联逻辑

• 串联关系只存在于设计稿和开发认知里，代码里感受不到

• 开发需要自己理解设计意图、手写串联逻辑，理解成本极高

• 动画推进时机分散在用户事件、接口回调、动画回调中，维护困难

这是当前链路唯一尚未解决的系统性问题，也是 Clip 分层方案要解决的核心问题。

下一步：Clip 分层产物方案

针对多模块串联的缺口，我们正在推进 Clip 分层产物机制，核心思路是：将现有"完整组件"的产出方式，改为同时产出"完整组件 + 按时间段拆分的独立动效函数（clips）"，让串联编排逻辑有地方可以落。

▐  产物分层结构

输出目录/├── index.tsx                  # 完整组件（UI 完整时直接使用）└── clips/    ├── clip.1-red-packet.ts   # 第一段：红包飞入（0ms–800ms）    ├── clip.2-shake.ts        # 第二段：红包抖动    └── clip.3-price.ts        # 第三段：价格变化

每个 clip 只负责"动"，不感知业务。clip 对外暴露该段动画涉及的元素入参，开发对照图层预览填入业务 DOM，由胶水层决定各段的触发时机与串联关系。

▐  胶水层的规律

串联编排逻辑全部收敛在胶水层，结构清晰，不污染动画代码和业务代码：

// 胶水层示例：串联三段动画，第一段结束后自动触发第二段，用户点击触发第三段const clip1 = playRedPacketClip({ card: cardRef.current, ... })clip1.then(() => playShakeClip({ card: cardRef.current }).play())clip1.play()const handleUserClick = () => playFadeOutClip({ card: cardRef.current }).play()const handleApiSuccess = (data) => playPriceChangeClip({ price: priceRef.current, targetPrice: data.price }).play()

▐  AI 辅助分段与胶水层生成

• 大模型对长段动画智能分段，每段单独预览图层和动画效果，clip 时间轴从 0 重置

• 自动生成 Cursor Prompt，开发复制进去即可生成胶水层代码，再人工微调

效果验证

AE 插件导出效果验证
带复杂粒子动画
普通动画，带可替换数字金额

动画集成验证
已有组件，新增动画
大量新增动画元素+已有元素新增动画

总结与展望

目前整条链路已完整跑通，覆盖了业务中绝大多数的动画场景，其中：

设计师侧

• 支持主流动画类型：形状图层（SVG）、遮罩动画、矢量动画、帧动画

• AE 插件实时预览，代码渲染效果所见即所得，问题前置发现

• 一键转码 +  预览 —— 所见即所得，直接生成代码链接交付

开发侧

• CSS / Anime.js 双格式代码输出，开箱即用

• 可视化图层处理：分段导出、剔除干扰元素、APNG 标记、组件替换

• Cursor Skill 智能集成，自动完成动画与业务 DOM 的融合

已验证场景：淘宝秒杀砸金蛋、一元购动画等需求的前端动效，单次开发耗时从 2–4 小时压缩至 15–30 分钟，还原度从 70–80% 提升至 95%+。

设计师产出的是可运行的代码，前端只需要接入。最终目标：让开发从动画实现细节中解放出来，专注业务逻辑本身。

团队介绍

本文作者香芋，来自淘天集团-营销&交易技术团队。一支专注于探索AI等前沿技术与营销业务技术的融合，深度结合用户场景与营销业务的技术团队。依托大淘宝丰富的用户生态和多元化的消费场景，致力于通过技术创新提升用户体验，优化个性化营销能力，助力业务持续增长。通过AI驱动的精准推荐、场景化表达与动态策略调控，我们为用户创造更自然、更智能的购物旅程，为营销业务提供高效、敏捷的技术支撑，助力淘宝构建以用户为中心的全域营销技术体系。

我们坚信技术是连接用户与价值的桥梁，持续探索创新边界，让营销更懂用户，用技术点亮每一个关键用户体验瞬间。

¤ 拓展阅读 ¤
3DXR技术 | 终端技术 | 音视频技术服务端技术 | 技术质量 | 数据算法