Animation Explainer · 知识动画化技能
这个技能是什么
输入一个主题("打开浏览器到屏幕上像素的全过程"、"一个 SQL 查询是怎么被执行的"、"TLS 1.3 握手"、"V8 是怎么编译 JS 的"),输出一份单文件 HTML 动画演示,能在任意浏览器打开播放。
参考实现:examples/browser-request/index.html。任何新主题都从复制这个文件开始,而不是从零写。
它不是什么
- ❌ 不是幻灯片:每节有 SVG 动画,元素会移动、闪烁、依次出现
- ❌ 不是单页长滚动信息图:内容被切成离散场景,自动按节奏播放
- ❌ 不是 PPT 截图导出工具:纯 HTML+SVG+CSS+原生 JS,没有打包步骤
- ❌ 不是通用 explainer 框架:只解决一类问题 — 多场景剧场式技术解说
核心结构(必须遵守)
文件
- 单一
index.html,所有 CSS/JS/SVG 内联。零外部依赖(除了 Google Fonts,可选)。 - 复制 `ex
[Description truncada. Veja o README completo no GitHub.]