AI 动画生成工具调研

从网页动画到专业视频制作：开源项目与技术路线

这份调研围绕编程 Agent 的动画生成能力展开，重点梳理网页动画、程序化视频、数学知识动画及科普流水线四类方案，并给出一条轻量级落地路径。

用 Claude Code、Codex 等编程 Agent 制作动画，已经不局限于生成网页上的简单动效。通过合适的 Skill，Agent 可以编写网页动画、动态插画、数学演示动画，也可以参与完整视频的制作。

这些项目解决的问题并不相同。网页动画侧重浏览器中的交互与运动效果；Remotion 等工具负责把代码组织成可渲染的视频；Manim 更适合公式、几何图形和科学原理的可视化；科普流水线则尝试把文本直接转成演示内容。

网页动画是最容易接入编程 Agent 的路线。核心做法是让 Agent 编写 HTML、CSS 和 JavaScript，再通过 GSAP、SVG、Canvas 等技术实现动画。成品可以直接在浏览器运行，也可以进一步录制成视频。

GSAP 是成熟的 Web 动画库，擅长处理复杂时间轴、元素运动、滚动触发动画以及 SVG 变形。GSAP Skills 的价值，是帮助 Agent 按照 GSAP 的规范组织动画代码，而不是简单堆叠 CSS 动画。

• 适用场景：产品官网动态展示、页面滚动叙事、Logo 与 SVG 图形变形、复杂时间轴动画。

项目地址：https://github.com/greensock/gsap-skills

原始资料标注约 17.7k GitHub Stars。项目热度会变化，正式选型前建议再核对仓库数据。

这是面向不同网页动画任务的一组技能集合，涵盖 SVG 动画、GSAP、Lottie、页面过渡、微交互、ASCII 动画以及 60FPS 性能优化等方向。

• 适合尚未确定具体实现技术、希望 Agent 根据需求选择动画方案的场景。

项目地址：https://github.com/iart-ai/web-animation-skills

原始资料标注 Skills.sh 约 25k installs。安装量与 GitHub Stars 是不同指标，不宜直接比较。

这个项目关注的重点不是动画框架，而是动画最终应该呈现什么视觉风格。项目整理了 341 种代码动画风格提示词、193 张参考静帧，并提供离线风格挑选器，同时封装成 Claude Code 和 Codex 可使用的 Skill。

它解决的是一个常见问题：我们知道想生成动画，却不容易准确描述视觉效果。借助参考风格，可以让 Agent 更明确地理解科技感粒子、几何线条运动、赛博朋克或流体效果等视觉方向。

项目地址：https://github.com/XiaoyeCodes/code-animation-prompts

原始资料标注约 244 GitHub Stars。

如果目标是产品宣传片、技术讲解视频或数据可视化视频，仅生成 HTML 动画通常还不够。完整视频往往还涉及时间轴、字幕、配音、镜头切换、背景音乐和最终渲染。Remotion 是这条路线中值得重点关注的工具。

Remotion 把视频制作组织成 React 项目。画面由组件和时间帧控制，动画、文字、图片、图表和音频可以按组件方式组合，最终渲染成 MP4。

• 适用场景：批量生成视频、模板化视频、参数化内容、需要持续维护的视频工程。

官方 Skills 涵盖项目创建、内容标记、视频渲染、地图动画和字幕处理等能力。

项目地址：https://github.com/remotion-dev/skills

该项目覆盖动画原理、Logo 动画、Remotion 视频制作、After Effects 和节奏剪辑等方向。它更偏向设计方法与制作技能，适合希望 Agent 不只是让元素动起来，还能遵循基本动效设计原则的场景。

项目地址：https://github.com/iart-ai/motion-design-skills

原始资料标注 Skills.sh 约 31k installs。

项目包含 56 个 Skill、19 个技能包，涉及动态排版、数据图表、3D/WebGL、视频素材和字幕条等。值得借鉴的是它强调渲染后的检查流程：先渲染关键帧，再截图检查，发现问题后修改并重新渲染。

项目地址：https://github.com/iart-ai/motion-skills

原始资料标注约 1.1k GitHub Stars。

如果要讲解数学公式、算法原理、物理过程或医学机制，可以重点考虑 Manim。它通过 Python 代码精确控制公式、几何图形、坐标系和动态变化。3Blue1Brown 的数学视频是这类表达方式的代表。

1. adithya-s-k/manim_skill：同时覆盖 Manim CE 和 ManimGL，适合让编程 Agent 编写数学动画。

项目地址：https://github.com/adithya-s-k/manim_skill

2. shuyicc/MathLens：中文项目，尝试把数学题转化为题目分析、可视化、配音脚本和 Manim 成片的完整流程。

项目地址：https://github.com/shuyicc/MathLens

3. 其他项目：

• Yusuke710/manim-skill：Manim 动画 Skill。

项目地址：https://github.com/Yusuke710/manim-skill

• AmitSubhash/3brown1blue：面向 3Blue1Brown 风格的数学动画。

项目地址：https://github.com/AmitSubhash/3brown1blue

Manim 的优势在于画面与数学内容之间有明确对应关系，更适合知识讲解，不是一般商业宣传动画的首选。

其中 reanimate 的思路比较特别：它尝试从已有动画中提取运动规律，再通过代码复现。与单纯根据文字描述生成动画相比，这更接近参考作品复刻。

如果当前主要需求是代码动画，没有必要一开始就引入完整的视频制作框架。可以先安装三个 Skill，形成从风格选择到网页动画生成的基础能力。

推荐的基础流程：

• 输入文字、图片或创意需求
• Agent 分析需求，确定动画风格
• 调用 GSAP、SVG 或 CSS 生成 HTML 动画
• 在浏览器中渲染，截图检查并调整
• 通过现有 html2video 工具转换为 MP4
• 输出网页动画或视频成品

如果后续需要多轨道剪辑、字幕、配音、镜头切换和批量生成，再引入 Remotion。数学、算法和科学原理的讲解，则可以单独使用 Manim。

动画生成不等于动画代码生成。最终效果还取决于视觉风格选择、运动规律、帧率控制、关键帧检查和视频渲染。尤其是截图检查与关键帧验收，应该成为生成流程的一部分，而不是代码生成后就直接交付。

这些 Skill 的价值，在于把过去依赖专业设计师和动画工程师完成的部分工作，逐步拆解成编程 Agent 可以执行、检查和重复使用的标准化流程。

实际落地时，建议从网页动画开始，先跑通“需求输入—风格选择—代码生成—浏览器验收—视频导出”的闭环，再根据业务复杂度逐步增加 Remotion 或 Manim。

说明：文中 Stars 与安装量为原始调研材料提供的参考数字，并非实时核验数据；项目活跃度、安装命令和功能范围可能变化，正式采用前请以项目仓库及官方文档为准。