前段时间有个演示材料要用到一条动态的圆内滚线轨迹图，要求线条干净、能实时调参数、颜色最好能跟着主题变。我去试了一圈现成的动图工具，折腾了一个多小时，出来的东西要么比例被压扁，要么改一个参数得整段重做，最后索性写了三四十行代码，直接在浏览器里生成几何动图，还做了个能拖参数的小面板。这件事让我再次确认了一个判断：几何动图的本质是数学可视化，与其靠现成工具补关键帧，不如让代码把每一帧都算出来。
这篇文章我会从最小可运行的例子讲起，把参数方程、渲染路线选型、交互面板和最后导出视频/GIF 这几个环节完整梳理一遍。如果你刚接触这类动图，可以直接照抄前两个例子；如果已经有基础，可以直接跳到第 4 节以后的选型和导出部分。
1. 为什么我放着现成工具不用，非要写代码生成几何动图
1.1 现成工具的三个短板
我不否认现成工具在插画、剪辑、合成方面的效率，但放在"几何"这件事上，它们的短板非常明显。几何图形的核心是数学关系，而这类工具的数据模型是手工绘制的路径和关键帧。一条本来可以用公式描述的曲线，在工具里通常需要密集的锚点去拟合；想调整振幅或半径，得手动拖动关键帧；想整体换一套配色，几十个对象要逐个改样式。做一次性静态插画还好，只要涉及参数连续变化，这套链路立刻变得笨重。
另一个痛点是不可复用。这周做一张圆形动图，下周要做一张摆线动图，两者从零开始，流程完全重来。但用代码实现的话，圆的参数方程和摆线的参数方程只是两三行公式的区别，框架完全一致，改完就能用。
还有导出质量的问题。经过导出、压缩、二次转换之后，线条边缘容易糊，背景色也可能被压出色带，尤其是渐变部分，观感明显下降。浏览器实时渲染则没有中间损耗，矢量清晰度直接取决于显示设备。
1.2 代码生成的核心思路
代码生成几何动图的核心思路可以压缩成一句话：几何对象加参数方程，再叠加时间变量。时间每前进一帧，绘制函数重算一次画面。旋转就是角度随时间递增，呼吸就是半径随 sin 函数摆动，颜色渐变就是 RGB 三个分量各自做插值。
这样做的好处有三个：
- 一切可参数化。半径、速度、边数、颜色在代码里都是变量，改一个数字，整张图联动变化。
- 轻量可复用。几十到几百行代码，复制进任何网页就能跑，比导出的视频灵活得多。
- 天然可交互。滑块、鼠标拖拽、随机化按钮，能让观看者直接操纵参数，一张静态的演示图变成可探索的小工具。
适合这种写法的场景也很明确：课程教学里的数学可视化、讲解齿轮/摆线/波形时的配套动画、网页开屏的氛围动效、甚至纯粹的数字艺术作品。只要图形的运动规律能写成数学表达式，代码生成几乎是性价比最高的方案。
2. 第一条能跑的动画：一个 40 行 Canvas 例子拆开讲
2.1 最小文件骨架
在浏览器里做几何动图，Canvas 2D 是门槛最低的入口。它不需要安装任何依赖，一个 HTML 文件就够。新建一个文件，把下面这段代码保存成demo.html，用浏览器打开，你就能看到第一个动图：一个匀速旋转的正方形。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>旋转方块</title> </head> <body> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); const cx = 300; const cy = 200; function draw(time) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(cx, cy); ctx.rotate(time * 2 * Math.PI / 1000); ctx.strokeRect(-80, -80, 160, 160); ctx.restore(); } function loop(time) { draw(time); requestAnimationFrame(loop); } requestAnimationFrame(loop); </script> </body> </html>这段代码里所有核心概念都出现了：canvas是画布，ctx是绘图上下文，time是页面打开以来的毫秒数。ctx.rotate的角度由时间决定，所以正方形会持续转圈。save和restore用来保护坐标系，让矩阵变换只影响当前这个图形。
2.2 动画循环里的"清屏-更新-绘制"
动画循环其实只有三件事：清掉上一帧残留、更新状态、重新绘制整帧。顺序不能乱。clearRect第一步清空画布，否则上一帧的线条会叠加在当前帧下面，画面不是动画，而是一团越来越密的线条网。
第二步更新状态。这里的状态可以是角度、半径、颜色，甚至整个坐标系的变换矩阵。我的例子用了time直接计算，也可以用一个递增变量：
angle += 0.02;第三步绘制。用更新后的状态把图形画出来。整个过程由requestAnimationFrame驱动，它表示"浏览器在下次绘制之前调用我一次"。显示器刷新率是 60Hz 时，它大约每秒调用 60 次；刷新率是 144Hz，它也会跟着变。
这里必须强调一下为什么不用setInterval。requestAnimationFrame会在页面切到后台时自动暂停，节省 CPU 和电量；而setInterval不管页面是否可见，都会一直执行，在移动端很容易带来性能和发热问题。几何动图的循环应该始终优先用requestAnimationFrame。
2.3 从旋转方块到呼吸圆
把方块换成圆，只需要改动绘图部分的几行。下面这个例子通过Math.sin让半径在 40 到 120 之间连续变化，效果类似呼吸：
function draw(time) { ctx.clearRect(0, 0, canvas.width, canvas.height); const radius = 80 + 40 * Math.sin(time / 500); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke(); }Math.sin的结果在 -1 到 1 之间来回摆动，天然适合做周期性往复运动。把时间参数time / 500改小，呼吸就变慢；把振幅 40 改大，圆的尺寸变化就更夸张。这个模式几乎会出现在后面所有几何动图里，建议先亲手改几个系数感受一下。
3. 从圆到利萨如曲线：参数方程怎么写才不晕
3.1 把参数 t 当成一块秒表
很多人觉得参数方程难，其实可以这样想：想象一个机器人手持画笔在纸上游走，t是你手里的秒表读数，x(t)告诉机器人此时在左右方向上的位置，y(t)告诉它上下方向上的位置。如果t只从 0 走到 2π，你得到一条静态轨迹；如果每秒让t多走一段，你看到的就是画笔运动的动画。
之前画圆用的ctx.arc之所以直观，是因为它已经帮你封装了下面这层关系：
x = cx + r * cos(t) y = cy + r * sin(t)t从 0 扫到 2π，得到的就是一个完整的圆。但如果你想画任意曲线，就得回到公式本身，手动计算每一个点的坐标。这也是代码生成几何动图最核心的一步：把数学公式翻译成循环里的x和y。
3.2 高频曲线公式表（建议收藏）
我经常用到的几组参数方程，整理成一张表，可以直接抄：
| 曲线名称 | 参数方程 | 参数范围 |
|---|---|---|
| 圆 | x = r·cos(t)，y = r·sin(t) | [0, 2π) |
| 椭圆 | x = a·cos(t)，y = b·sin(t) | [0, 2π) |
| 螺旋线 | x = t·cos(t)，y = t·sin(t) | [0, 10π] 等 |
| 心形线 | x = 16·sin³(t)，y = 13·cos(t) - 5·cos(2t) - 2·cos(3t) - cos(4t) | [0, 2π) |
| 圆内摆线 | x = (R-r)·cos(t) + d·cos((R-r)·t/r)，y = (R-r)·sin(t) - d·sin((R-r)·t/r) | [0, 多周期] |
| 利萨如曲线 | x = A·sin(a·t + δ)，y = B·sin(b·t) | [0, 2π) 或多周期 |
使用这张表时有两个容易踩的坑。第一，JavaScript 的三角函数只认弧度，360 度等于 2π，一个系数写错画面立刻乱掉。第二，Canvas 的 y 轴方向向下，所以公式里的sin部分在视觉上通常上下颠倒，如果你对图形方向有要求，记得把 y 写成cy - r * Math.sin(t)。
3.3 动态利萨如曲线完整示例
利萨如曲线是我特别推荐新手尝试的，因为参数a和b稍微一变，图案就从"麻花"变成"圆"再变成"直线"，反馈非常直观。下面这段代码会在画布上画出一条动态旋转的利萨如曲线：
<canvas id="c" width="600" height="600"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); const cx = 300; const cy = 300; function draw(t) { ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); for (let i = 0; i <= 400; i++) { const theta = (i / 400) * Math.PI * 2; const x = cx + 180 * Math.sin(3 * theta + t / 1000); const y = cy + 180 * Math.sin(2 * theta); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); } function loop(time) { draw(time); requestAnimationFrame(loop); } requestAnimationFrame(loop); </script>注意第 12 行的t / 1000。这个相位偏移让整个闭合曲线随时间慢慢旋转，如果把它改成0，曲线就是完全静止的。另一个好玩的改动是让循环次数上限动态变化，比如让图形展示"一笔一笔被画出来"的过程，这会让动图更有讲故事的感觉。
3.4 正多边形的顶点公式与多角星
除了曲线，正多边形也是几何动图里最常见的元素。它本质上是均匀分布在圆上的一组点，第i个顶点的角度是2π·i / n，坐标公式为：
x = cx + r * Math.cos(angle) y = cy + r * Math.sin(angle)只要把这个公式写进循环，就能画出任意边数的正多边形：
const n = 6; ctx.beginPath(); for (let i = 0; i < n; i++) { const angle = (i / n) * Math.PI * 2; const x = cx + 150 * Math.cos(angle); const y = cy + 150 * Math.sin(angle); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.stroke();还有一个进阶玩法：连接顶点时不是连接相邻的两个，而是连接第i个顶点到第(i * m) % n个顶点。当m和n互质时，会得到一笔画的正多角星，比如五角星就是n=5, m=2。这个知识点在生成万花筒类动图时特别实用，后面加交互面板时也会用到。
4. Canvas、SVG、Three.js：不同几何动图各自的路
4.1 三条路线的定位差异
浏览器里的几何动图并不只有 Canvas 一种做法。SVG 和 Three.js 在特定场景下效率更高，选错路线会平白增加很多工作量。三者定位用一张表可以看得很清楚：
| 维度 | Canvas 2D | SVG | Three.js / WebGL |
|---|---|---|---|
| 图元模型 | 像素绘图，无对象概念 | DOM 节点，每个图形都是元素 | 网格、几何体对象 |
| 适合规模 | 几千到几万个点/粒子 | 几十到几百个节点 | 大量顶点、复杂 3D 场景 |
| 事件交互 | 需要自己做点/区域命中 | 天然事件绑定 | 有 Raycaster 但复杂度高 |
| 学习曲线 | 低 | 低 | 较高 |
| 典型场景 | 粒子、波形、实时逐帧图形 | 图表动画、UI 动效、可点击几何图 | 三维几何体、相机环绕、着色器 |
4.2 大多数 2D 几何动图，我用 Canvas 2D
Canvas 2D 是最接近"数学函数直接翻译"的方案。它没有对象的概念，只是往像素上画线，所以当你需要画几千个粒子、数千条线，或者图形形状每帧都在发生变化时，它没有 DOM 节点数量的压力，性能非常稳。
我个人的经验是：用 Canvas 画同样一张动图，几千个点轻松流畅；如果换成 SVG，几千个节点一起操作 DOM，浏览器很快就吃力了。Canvas 的缺点是需要自己做命中检测，既没有节点的概念，也没法直接给某个图形绑定点击事件。但纯几何动图通常不需要点击，所以这个缺点基本可以忽略。
4.3 SVG 适合"少而精致"的交互场景
如果图形数量少，又需要文字标注、悬停高亮、点击反馈，SVG 是更好的选择。它里面的每个图形都是 DOM 元素，可以直接绑定事件，样式也能用 CSS 控制，动画甚至不需要 JavaScript。
SVG 里有一个很冷门的原生动画方式叫 SMIL，不写一行 JS 就能让圆呼吸：
<svg width="200" height="200"> <circle cx="100" cy="100" r="20" fill="none" stroke="black"> <animate attributeName="r" values="20;40;20" dur="2s" repeatCount="indefinite"/> </circle> </svg>这种写法适合做轻量级 UI 动效和图表动画。但注意别把 SVG 用在需要大量节点的地方，DOM 节点多了，浏览器重排和重绘的成本会非常明显。
4.4 三维几何动图直接交给 Three.js
如果你要做三维几何体、相机环绕、带光照的球体或者复杂的着色器效果，不要去尝试手写 WebGL。WebGL 是 GPU 层面的裸 API，一个能动的三角形都要几十行样板代码，还要自己写着色器。Three.js 把场景图、相机、几何体、材质都封装好了，一个旋转的齿轮环只需要十行核心代码：
import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(400, 400); document.body.append(renderer.domElement); const mesh = new THREE.Mesh( new THREE.TorusGeometry(1, 0.3, 16, 64), new THREE.MeshNormalMaterial() ); scene.add(mesh); function loop() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.015; renderer.render(scene, camera); requestAnimationFrame(loop); } loop();如果你的页面用 CDN 方式引入 Three.js，把import替换成全局THREE变量即可。记住：90% 的平面几何动图用 Canvas 2D，少量精致交互图用 SVG，三维场景直接上 Three.js，这个默认组合能省掉大量纠结时间。
5. 把参数暴露成滑块，动图就变成了探索工具
5.1 一个滑块的完整接入方式
几何动图最大的红利是参数可调。给动图加一个滑块，它就从"演示"变成了"探索工具"：观众自己拖动边数、速度、相位，马上能看到不同图案的出现过程。下面是一个可调节边数和旋转速度的正多边形示例：
<input type="range" id="n" min="3" max="24" value="6"> <input type="range" id="speed" min="0" max="100" value="30"> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); const nSlider = document.getElementById('n'); const speedSlider = document.getElementById('speed'); function draw(t) { const n = parseInt(nSlider.value, 10); const speed = parseInt(speedSlider.value, 10) / 100; ctx.clearRect(0, 0, 600, 400); ctx.save(); ctx.translate(300, 200); ctx.rotate(t * speed * Math.PI * 2 / 1000); ctx.beginPath(); for (let i = 0; i < n; i++) { const angle = (i / n) * Math.PI * 2; const x = 150 * Math.cos(angle); const y = 150 * Math.sin(angle); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.stroke(); ctx.restore(); requestAnimationFrame(draw); } requestAnimationFrame(draw); </script>这里有一个很多教程没讲透的点：滑块的值只需要在draw()里读取，不需要监听input事件。因为requestAnimationFrame每帧都会执行一次draw()，你拖动滑块时，下一帧自然就读取到了新值，动画实时更新。
相比在input事件里手动调用draw()的做法，这种写法更简单，也不会出现事件触发频率高于帧率导致的重绘抖动。如果真的需要监听input，比如要同步更新一个数字显示，也只在事件里更新数字文本，不要把绘制逻辑塞进去。
5.2 让鼠标直接成为参数
滑块适合精确调参，但鼠标拖拽更适合直觉探索。监听 Canvas 的pointermove事件，把鼠标 x 坐标映射到 0 到 2π 的相位区间，再在draw()里把这个相位加到角度上，图形就会跟着鼠标方向转动：
let phase = 0; canvas.addEventListener('pointermove', (e) => { phase = (e.clientX / canvas.clientWidth) * Math.PI * 2; });这个交互方式在利萨如曲线、齿轮咬合、摆线演示中尤其好用。注意事件回调里只存坐标值，绘制统一放在requestAnimationFrame循环里，这是保持动画流畅的基本原则。
5.3 暂停与随机化：两个容易被忽略的小设计
暂停按钮的价值在导出和截图时才会体现。只需要一个布尔状态，循环里判断一下：
let running = true; function loop(time) { draw(time); if (running) requestAnimationFrame(loop); } pauseBtn.onclick = () => { running = false; }; resumeBtn.onclick = () => { requestAnimationFrame(loop); };随机化按钮更有意思。给参数赋一组随机值，往往能撞见意想不到的漂亮图案，这在利萨如曲线和多角星里非常明显。建议把随机范围限制在合理区间，不然很容易出现一团乱麻：
randomBtn.onclick = () => { nSlider.value = 3 + Math.floor(Math.random() * 21); speedSlider.value = 10 + Math.floor(Math.random() * 90); };很多惊艳的几何纹理不是设计出来的，而是随机化之后碰巧遇见的。多留一个按钮，就是多给灵感留一条路。
6. 导出成片：把 Canvas 动图录制成 GIF / 视频文件
6.1 先想清楚目标平台要什么文件
网页里跑的 Canvas 动画，自己看没问题，但一旦要放进文档、发给别人或者传到社交平台，就需要导出成视频或 GIF 文件。先判断一下目标平台的要求：
- 网页内嵌：Canvas 实时渲染最好，无需导出。
- 文档/社交平台：通常需要 WebM、MP4 或 GIF。
- 简单短循环的线条动图：GIF 完全够用，且兼容性最好。
- 大面积渐变或者复杂纹理：建议用视频，GIF 只有 256 色调色板，渐变区域容易出现色带和噪声。
6.2 用 MediaRecorder 原生录制 WebM
浏览器自带MediaRecorder接口，配合canvas.captureStream()，就能把 Canvas 动画直接录成 WebM 视频，不需要任何第三方库。下面是一个带开始、停止按钮的录制方案：
const chunks = []; let recorder = null; const options = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') ? { mimeType: 'video/webm;codecs=vp9' } : {}; startBtn.onclick = () => { chunks.length = 0; const stream = canvas.captureStream(60); recorder = new MediaRecorder(stream, options); recorder.ondataavailable = (e) => chunks.push(e.data); recorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'geometry.webm'; a.click(); URL.revokeObjectURL(url); }; recorder.start(); }; stopBtn.onclick = () => { if (recorder) recorder.stop(); };captureStream(60)里的 60 是期望帧率，实际帧率依然由requestAnimationFrame决定。录制期间不要切换浏览器标签页，否则requestAnimationFrame会暂停，录制内容会卡住。如果目标平台需要 MP4，建议先录 WebM，再通过桌面端工具转封装，浏览器端直接录 MP4 的兼容性目前还不够稳定。
提示：录制时给画面留一点呼吸时间，动画启动后等一两秒再点开始，停止前也留一点余量，方便后期裁剪。
6.3 为什么你导出的视频总是不够清晰
这个问题十有八九出在 Canvas 的尺寸上。canvas.width和canvas.height是实际像素缓冲区大小，CSS 里的width和height只是显示尺寸。如果你平时在页面上显示的是 600x400，直接把 Canvas 录制出来，导出的视频分辨率大概率也是 600x400，放大之后自然模糊。
想要高清导出，录制前把canvas.width和canvas.height改成目标分辨率，比如 1920x1080。但很多几何代码里会把中心坐标硬编码成300, 200，改尺寸后图形会偏到角落。所以建议从一开始就把中心坐标写成变量：
const cx = canvas.width / 2; const cy = canvas.height / 2;另外注意高分屏设备。如果初始化时为了屏幕清晰做了canvas.width = cssWidth * devicePixelRatio，导出前一定要把尺寸重置为固定目标值，否则视频分辨率会变成两倍或三倍，不仅文件变大，观感也没有实质提升。
6.4 非要 GIF 时的兜底方案
某些老旧平台确实只认 GIF，那就需要逐帧收集 Canvas 画面，再交给 GIF 编码库合成。大致思路是：
- 每帧调用
canvas.toBlob()或读取ImageData保存当前画面。 - 用一个帧率计数器控制采集间隔，比如每 1000/30 毫秒采集一帧。
- 全部采集完成后，交给 GIF 编码库合成，设置循环次数为无限。
- 控制总帧数。两三秒、每秒 30 帧就是 60 到 90 帧，内存占用已经不小，超过一百帧建议降低帧率或缩短时长。
说实话，现在绝大多数平台都已经支持视频文件，GIF 更多是兜底选择。如果动图里有大量渐变效果，转成 GIF 后画质下降会非常明显，这时候优先用 WebM 或 MP4 才是更合理的选择。
提示：导出时不要把分辨率盲目调高，1920x1080 在绝大多数场景已经足够。分辨率再高，只是增大文件体积，线条类动图的观感提升有限。
最后说一点个人体会。我做了不少几何动图之后发现，最惊艳的效果往往不是提前设计出来的，而是把参数范围放宽之后意外看到的。上面这些示例代码都很短，改几个系数、拖几次滑块、顺手点几下随机化，你可能在十分钟内就得到一张很喜欢的图。别怕数学，三角函数翻来覆去也就那一两个公式。先把第 2 节的例子跑起来，把边数、半径、速度都拖一遍，后面的事自然水到渠成。
